I tried to reproduce your error by using two methods of creating the table within the div. I only found out one difference: In IE using innerHTML to set the table construct one can omit the TBODY tag. It will be created by IE on its own, but when you create the table via createElement and appendChild you
MUST include the TBODY tag otherwise the table wont be shown. FF works happily with both variants.
Enough said, here's the code to corroborate my claim:
<html>
<head>
<script type="text/javascript">
function buildTableWithInnerHTML()
{
var c = document.getElementById("container1");
c.innerHTML = "<table><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr></table>";
}
function buildTableWithCreateElement()
{
var d = document;
var c = d.getElementById("container2");
var t = d.createElement("table");
var tb = d.createElement("tbody");
c.appendChild(t);
t.appendChild(tb);
var r1 = d.createElement("tr");
var r2 = d.createElement("tr");
tb.appendChild(r1);
tb.appendChild(r2);
var d11 = d.createElement("td");
var d12 = d.createElement("td");
var d13 = d.createElement("td");
var d21 = d.createElement("td");
var d22 = d.createElement("td");
var d23 = d.createElement("td");
d11.appendChild(d.createTextNode("1"));
d12.appendChild(d.createTextNode("2"));
d13.appendChild(d.createTextNode("3"));
d21.appendChild(d.createTextNode("4"));
d22.appendChild(d.createTextNode("5"));
d23.appendChild(d.createTextNode("6"));
r1.appendChild(d11);
r1.appendChild(d12);
r1.appendChild(d13);
r2.appendChild(d21);
r2.appendChild(d22);
r2.appendChild(d23);
}
</script>
<script type="text/javascript">
function ShowDivInnerHTML()
{
var c = document.getElementById('container1');
alert("Created by innerHTML:\n" + c.innerHTML);
c = document.getElementById('container2');
alert("Created by create & append:\n" + c.innerHTML);
}
</script>
<title>Dynamic Table in DIV</title>
</head>
<body onload="buildTableWithCreateElement();buildTableWithInnerHTML();">
<h2>Generated by setting innerHTML</h2>
<div id="container1"></div>
<h2>Generated via createElement & appendChild</h2>
<div id="container2"></div>
<input type="button" value="Show it!" onClick="ShowDivInnerHTML();">
<br>
</body>
</html>
In case you should still have some doubts feel free to leave a comment.
Happy coding!
-MRB