Javascript: issue when dynamically adding a row from its HTML to a table in IE

Question

I looked at some other questions like this one but they don't address this particular issue:

When I run this code in IE (8):

$("<tr><td>1</td><td>A</td></tr>").appendTo("#myTable tbody"); 

I end up with this HTML being added to the table's body:

<TR>
1</TD><//TD>
<TD>
</TD>
A</TD><//TD></TR><//TR>
</TR>

Any idea? Thanks in advance.

Answer 1

What you're trying to do is really difficult to do correctly. This is because a <TR> element is meaningless outside the scope of a <TABLE>. While interpreting your intent is easy for us humans, it's very possible that jQuery is not smart enough to do it, and do the right thing.

The right thing here would be something like:

var tbody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var row = document.createElement('tr');
tbody.appendChild(row);
var cell = document.createElement('td');
cell.innerHTML = '1';
row.appendChild(cell);
cell = document.createElement('td');
cell.innerHTML = 'A';
row.appendChild(cell);

Now the code in your question is admittedly much more compact, but that doesn't mean that jQuery will need to do much less work behind the scenes to actually achieve desired results.

Answer 2

try

$("#myTable tbody").append("<tr><td>1</td><td>A</td></tr>"); 

it'sthe same, but it does totally different things inside the jQuery