Can I append an Ajax requestXML object to my document tree all in one go?

Question

Greetings. Here is an XML object returned by my server in the responseXML object:

<tableRoot>
   <table>
      <caption>howdy!</caption>
      <tr>
         <td>hello</td>
         <td>world</td>
      </tr>
      <tr>
         <td>another</td>
         <td>line</td>
      </tr>
   </table>

Now I attach this fragment to my document tree like so:

getElementById('entryPoint').appendChild(responseXML.firstChild.firstChild);

But instead of being rendered as a table, I get the following text:

howdy! helloworldanotherline

The same result occurs of I replace firstChild.firstChild with just firstChild. It seems like I'm just getting the nodeValues, and all of the tags are stripped out?! Am I fundamentally misunderstanding what the responseXML object is supposed to represent? This works, BTW, if I take out the 'root' tags, and set innerHTML to responseText.
Can someone please enlighten me on the correct way to use responseXML?

Answer 1

You can create an element at the position you want to insert and than do

element.innerHTML = request.responseText

Answer 2

You get the text instead of a table, because you use pure DOM for manipulations and your response XML doesn't have the namespaces declarations. So when appending an XML element browser doesn't know whether your "table" tag is from HTML, XUL, SVG or else from.

1) Add namespace declaration:

<table xmlns="http://www.w3.org/1999/xhtml"&gt;

2) Instead of directly inserting a reffered XML DOM Element, you should first import that node into your HTML DOM Document:

var element = document.importNode(responseXML.firstChild.firstChild, true);
document.getElementById('entryPoint').appendChild(element);

Hope this helps!