Update: I figured this out!!! IE can attach the tr to a tBody node but not to a table node. Adding tBody into the node strcture does the trick, and in fact IE adds it to the node structure even if it's not there in markup.
<table id="table3"><tr id="row3"></tr></table>
<script>
var td3 = document.createElement('td');
td.innerHTML='thing3';
var tr3 = document.createElement('tr');
tr3.appendChild(td3);
document.getElementById('table3').tBodies[0].appendChild(tr3);
</script>
I'm having real trouble putting a row into a table in IE using DOM methods.
This should result in two tables with the first one saying "thing1" and the second saying "thing2". In firefox it works and in IE only one works. As far as I can tell the one that breaks actually makes considerably more sense than the one that works.
<table id="table1"><tr id="row1"></tr></table>
<table id="table2"><tr id="row2"></tr></table>
<style>#table1, #table2 {border:solid 1px black; padding:8px;}</style>
<script>
var td = document.createElement('td');
td.innerHTML='thing';
var tr = document.createElement('tr');
tr.appendChild(td);
document.getElementById('table1').appendChild(tr);
var td2 = document.createElement('td');
td2.innerHTML='thing2';
var tr2 = document.createElement('tr');
tr2.appendChild(td2);
document.getElementById('row2').appendChild(tr2);
</script>
Dated: 07/20/2005