CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
Ariel
Ariel

Reputation: 5830

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

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.

Upvotes: 5

Views: 441

Answers (2)

naugtur
naugtur

Reputation: 16915

try

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

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

Upvotes: 1

levik
levik

Reputation: 117499

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.

Upvotes: 1

Related Questions