How to convert HTMLElement to string

Question

I am going to create an XML element in JavaScript to communicate with the server side. I found that I can do this with document.createElement . But I do not know how to convert it to a string. Is there an API in the browser to make it easier? Or is there any JS library including this API?

EDIT: I found that the XMLSerializer API browser, this should be the correct way to serialize to a string.

Answer 1

You can get "external-html" by cloning an element, adding it to an empty "offstage" container, and reading the innerHTML container.

This example uses an optional second parameter.

Call document.getHTML (element, true) to include the children of the element.

 document.getHTML= function(who, deep){ if(!who || !who.tagName) return ''; var txt, ax, el= document.createElement("div"); el.appendChild(who.cloneNode(false)); txt= el.innerHTML; if(deep){ ax= txt.indexOf('>')+1; txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax); } el= null; return txt; } 

Answer 2

The outerHTML element property (note: supported by Firefox after version 11 ) returns the HTML of the entire element.

Example

 <div id="new-element-1">Hello world.</div> <script type="text/javascript"><!-- var element = document.getElementById("new-element-1"); var elementHtml = element.outerHTML; // <div id="new-element-1">Hello world.</div> --></script> 

Similarly, you can use innerHTML to get the HTML contained within the given element, or innerText to get the text inside the element (without HTML markup).

see also

• outerHTML - Javascript Property
• JavaScript Reference - Elements

Answer 3

The easiest way to do this is to copy the innerHTML of this element to the tmp variable and make it empty, then add a new element and then copy the tmp variable back into it. Here is an example that I used to add a jquery script to the top of the page.

 var imported = document.createElement('script'); imported.src = 'http://code.jquery.com/jquery-1.7.1.js'; var tmpHead = document.head.innerHTML; document.head.innerHTML = ""; document.head.append(imported); document.head.innerHTML += tmpHead; 

It's simple:)

Answer 4

There is a tagName property and attributes property:

 var element = document.getElementById("wtv"); var openTag = "<"+element.tagName; for (var i = 0; i < element.attributes.length; i++) { var attrib = element.attributes[i]; openTag += " "+attrib.name + "=" + attrib.value; } openTag += ">"; alert(openTag); 

See also How to iterate over all attributes in an HTML element? (I did!)

To get the content between the open and close tags, you can probably use innerHTML if you don't want to iterate over all the children ...

 alert(element.innerHTML); 

... and get the closing tag again with tagName .

 var closeTag = "</"+element.tagName+">"; alert(closeTag); 

Answer 5

This may not apply to all cases, but when extracting from xml I had this problem that I solved with this.

 function grab_xml(what){ var return_xml =null; $.ajax({ type: "GET", url: what, success:function(xml){return_xml =xml;}, async: false }); return(return_xml); } 

then we get xml:

 var sector_xml=grab_xml("p/sector.xml"); var tt=$(sector_xml).find("pt"); 

Then then I made this function to extract the xml string when I need to read from an XML file containing html tags.

  function extract_xml_line(who){ var tmp = document.createElement("div"); tmp.appendChild(who[0]); var tmp=$(tmp.innerHTML).html(); return(tmp); } 

and now conclude:

 var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo <b>in bold</b> 

Answer 6

sir @gpmcadam was really right. I tried external HTML and it brings a string of all html. Works 100%