I'm using some code to build up tables using JQuery, but in Firefox 3.5.3 on Mac OSX, the table cells all appear on separate lines by themselves, instead of in their respective rows. Chrome 5.0.342.7 beta on OSX correctly produces the table, as does Safari 4.0.5.
Here is a minimal reproduction case:
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
var b = $('body');
b.append("<table>");
for (var i = 0; i < 3; ++i)
{
b.append("<tr>");
for (var j = 0; j < 3; ++j)
b.append("<td>x</td>");
b.append("</tr>");
}
b.append("</table>");
});
</script>
</body>
</html>
In Chrome and Safari, I get this correct output:
x x x
x x x
x x x
but Firefox produces:
x
x
x
x
x
x
x
x
x
Note that if I manually create that exact table without using Javascript (i.e. direct into the HTML) then the table appears correctly in Firefox. Also, if I change the JS to append then entire table in one call then it also works -- the only time it doesn't work is if you append it part-by-part as I have done before.
My question is: is this to be expected, or should I report this as a bug to Firefox? I'm pretty sure this is a Firefox bug, but I'm a bit of a newbie to JS and web development in general, so perhaps there's something I'm missing?
P.S. obviously there are easy ways to get around this -- that's not my concern. See above.
