AJAX-generated <tr> becomes just the text content in firefox/chrome

First, I request s开发者_StackOverflow中文版ome HTML via AJAX.

Example response:

<tr class="recordRow">
  <td class="first recordType" id="recordType">holder</td>
  <td class="recordAmount" id="recordAmount">holder</td>
  <td class="recordDescription" id="recordDescription">holder</td>
  <td class="last recordDate" id="recordDate">holder</td>
</tr>

And I'm trying to make a DOM Object.

var d = document.createElement("div");
d.innerHTML = templateListItem;
alert(d.innerHTML);
alert(d.firstChild);

I thought this should add the row to the <div>, but I only get the text. When I append the response to an element, I only get the text content, e.g holder holder holder holder.

Why does the HTML seem to get squashed in firefox and chrome?

Added: If example response are like:

<tr><td><span>something here..</span></td></tr>

It will alert "HTMLSpanElement" in firefox. All tags like tr/td/ are removed.

If you are trying to insert a <tr> into a <div>, it is possible that the browser will not render this properly as it is illegal HTML. Try placing your <tr> into a <table> element or a <tbody> element nested inside of a <table> element.

If you're dragging that response from a server somewhere, it will just be text, as you've found out. If you can, you could change the AJAX code to return JSON, decode that, and turn it into an object.

In relation to the tags being removed, I read somewhere about browsers doing that, but it's very likely to be wrong; AJAX would fail miserably in that case.

If your XHR instance is var xhr = new XMLHttpRequest(), Be sure to use xhr.responseXML rather than xhr.responseText.