1

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);
}
user2880156
  • 23
  • 4

1 Answers1

2

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]);
SeDav
  • 761
  • 7
  • 19
  • If you run into problems with some Browsers, see [questions/9500318](http://stackoverflow.com/questions/9500318/troubles-trying-to-parse-an-html-string-with-domparser) . I found this to be usefull, because Opera wasn't able to parse into text/html – SeDav Apr 24 '14 at 20:39