Question

So I’m trying to dynamically build a table in javascript and I already have the jQuery library loaded so I chose to use it’s append method because it’s easy to use and easy to find my div.

This works in FireFox and Chrome but fails in IE8 (no errors in IE8, the table just doesn’t show up)

$("#weatherFeed").append('<table class=\"weather\"><tr>');
for (var i = 0; i < 7; i++) {
    $("#weatherFeed").append('<td>a</td>');
}
$("#weatherFeed").append('</tr><tr>');
for (var i = 0; i < 7; i++) {
    $("#weatherFeed").append('<td>b</td>');
}
$("#weatherFeed").append('</tr></table>');

Yet this works fine in all three:

$("#weatherFeed").append('<table class=\"weather\"><tr><td>wth</td><td>wth</td>'
+ '<td>wth</td><td>wth</td></tr><tr><td>wth</td><td>test</td><td>test</td>'
+ '<td>test</td></tr><tr><td colspan=\"4\">MOOSE BALLS</td></table>');

It’s our corporate intranet and 99% of our users are on IE8.. I’m new to javascript and jQuery but I’m positive I can find another way of accomplishing this goal I just figure it should work so maybe I’m doing it wrong.

Answer 1

jQuery automatically does the closing tags so you dont need to do it yourself.
Also you should append to the table and not to the div.

Try this instead:

var table = $('<table class=\"weather\">');
$("#weatherFeed").append(table);

var tr = $('<tr>');
table.append(tr);
for (var i = 0; i < 7; i++) {
    tr.append('<td>a</td>');
}

tr = $('<tr>');
table.append(tr);
for (var i = 0; i < 7; i++) {
    tr.append('<td>b</td>');
}

See fiddle: http://jsfiddle.net/maniator/cUkFa/