Question

I’m using an XMLHttpRequest to retrieve XML from the server, and I’d like to append it to an existing HTML node on the page. It’s well formed HTML and I’ve added xmlns='http://www.w3.org/1999/xhtml' to the XML root element in the response: works fine for Firefox, but IE bombs with “No such interface supported”, I guess because it’s got the node I’m trying to append typed as “IXMLDOMElement”.

Here’s the XML response:

<qstat xmlns='http://www.w3.org/1999/xhtml'>
    <ul>
        <li><b>Cycle number:</b> 6</li>
        <li><b>Error:</b> none</li>
    </ul>
</qstat>

And here’s the Javascript:

var req = new XMLHttpRequest()
req.onreadystatechange = function() {
    if(req.readyState == 4)
    {
        dom = req.responseXML;
        var nodes = dom.firstChild.childNodes;   //Everything under the root node.
        var ele = document.getElementById("qstat");
        for(var i=0; i<nodes.length; i++)
        {
            ele.appendChild(nodes[i]);  // BOMBS HERE.
        }
    }
};

The MSIE Debugger (MSIE 8) correctly identifies nodes[0] as having tagName=ul and even has namespaceURI="http://www.w3.org/1999/xhtml", but I guess because it’s type is IXMLDOMElement, the call doesn’t work.

So is there any way to convert the objects in nodes to corresponding HTML node objects that I can append to the element?

Answer 1

Try following:

1) create an HTML element

var factory = document.createElement("div");

2) serialize the fetch XML element

var xml = nodes[i].xml || new XMLSerializer().serializeToString(nodes[i]);

3) render xml through innerHTML

factory.innerHTML = xml;

4) get firstChild from factory element which is now HTML element

var eleHTML = factory.firstChild;

5) append eleHTML to where you need it:

ele.appendChild(eleHTML);

Hint: you can reuse once created factory DOMHTML element