How do I convert an XML DOM element into an HTML DOM element?

Question

I am trying to use an XMLHTTPRequest to download an .xml file and add some of it's elements to the page as content. What I have done is to make the request, get the document, get the specific DOM elements from the xml that I want to import, use existing.appendChild(fromXML) to append the element from the xml DOM to the element in the HTML DOM.

However, none of the actual tags are rendered. The text inside each of the tags is rendered just fine. But the tags themselves seem to be ignored. Firebug shows the added tags in the HTML panel in light blue font rather than normal blue for other tags, but I haven't been able to figure out what that means. The webkit developer tools also shows me that the tags are there (no special coloring, though), but they are not rendered properly (img and a tags don't have any effect at all, for example).

Am I missing some conversion from XML DOM to HTML DOM?

Here is a simple version of my code with comments for brevity:

// Make xmlHTTPRequest
...

// Get items from the response xml
var items = xhr.responseXML.getElementsByTagName("item");  

// Get one item and it's children recursively
var elm = document.importNode(items[0],true);  

// Get the existing element to add the item add to  
existingDomElement = document.getElementById("demo");   

for (var i = 0; i < $(elm).children().length; i++) {  
    var child = $($(safeChild).children()[i])[0];  
    existingDomElement.appendChild(child);  
} 

Answer 1

Apparently, it's been done before, see this question . That poster's code seems to work, but he wants something more elegant and concise. He seems to be one step ahead of you in that at least.

But the only suggestion there is to serialize the whole thing to text, and then parse it in the current tree — which might not necessarily work in your case anyway, since XML might not always parse correctly as HTML...