How do I get XHR to show responseXML as an HTML element (without innerHTML)

Question

Related to turning Ajax Responsexml into HTML

I'm trying to use XHR to get a <select> element with a few options and append them to a <div>, but using importNode() and appendChild() I can't get the response to render as an HTML element. Instead, all that shows is the text of the options.

For example, here's my xml:

<select>
    <option value='1'>A</option>
</select>

The resulting page only shows the text A instead of a select element. Why aren't the elements rendered, and what's a good method to properly import them (without innerHTML)?

Fiddle: http://jsfiddle.net/9D9pD/2/

Relevant javascript [I even tried adoptNode()]:

function handleResponse() {
    var xmlResponse = xmlHttp.responseXML,
        root = xmlResponse.documentElement;
    console.log(xmlHttp.responseText);
    var i = document.importNode(root, true);
    var a = document.adoptNode(root);
    document.getElementById("import").appendChild(i);
    document.getElementById("adopt").appendChild(a);
}

Answer 1

You can make use of the DOMParser, which can be pretty usefull in this case. I updated your fiddle

var parser = new DOMParser()
var el = parser.parseFromString(xmlHttp.responseText, "text/html");
document.getElementById("import").appendChild(el.childNodes[0]);