How to get the innerHTML of a XML document (AJAX)?

Question

After an AJAX query, a XML file is returned. I'm able to "parse" that file, but when it comes to getting the "innerHTML" (or in this case "innerXML") of an element, the issue arises.

If the XML element, let's say "content", only contained text I could do: content.childNodes[0].nodeValue (assuming that content references the XML element "content"). But that element contains other elements:

<stackoverflow reason="tribute to this page">
   <content>
      <div><span><p>Some more HTML elements</p></span></div>
   </content>
</stackoverflow>

I need to copy the content of <content> to an existing <div> in the page, how could I do that?

Ex. myDiv.innerHTML = content.innerHTML;

Answer 1

Try placing the HTML within CDATA tags, like so:

<stackoverflow reason="tribute to this page">
   <content>
      <![CDATA[<div><span><p>Some more HTML elements</p></span></div>]]>
   </content>
</stackoverflow>

Then just insert the data into your element via innerHTML.

document.getElementById('target').innerHTML = content.childNodes[0].nodeValue;