I was trying to dynamically add rows to a table and ran into a problem with both Firefox and Internet Explorer. I had a table with a couple rows of data and there was a link to add a new row at the bottom of the table (in its own row).
The javascript simply cloned the first row, cleaned out some values from the td’s and inserted the new row into the table before the last row (i.e., the inserted row would be the second to last row) . That's where the problems arose. In firefox, table.appendChild(newRow) functioned fine, but when I tried table.insertBefore(newRow,lastRow) it threw a DOMexception saying it could not replace the child node because it didn't exist. In Internet Explorer, I could use appendChild or insertBefore. It turns out, you need to append and or insert to the tbody html element, instead of the table element. A real basic example:
<html>
<body>
<table>
<tbody id="useThis">
<tr id="row1"><td>Row One</td></tr>
<tr id="row2"><td>Row Two</td></tr>
</tbody>
</table>
<script type="text/javascript">
//clone row1
var newRow = document.getElementById('row1').cloneNode('true');
//get row2
var row2 = document.getElementById('row2');
//add cloned row1 one before row2
document.getElementById('useThis').insertBefore(newRow,row2);
</script>
</body>
</html>