Question

First, I request some 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.

Answer 1

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.