document.getElementById().innerHTML + IE7 can cause problems

It seems that Firefox and IE7 can use and replace the innerHTML of a DIV just fine. However when you try it with a table or a tbody tag (among others, I’m sure), it just breaks apart miserably in IE7 (Firefox works just fine). You’ll most likely get a JavaScript error that states “Unknown runtime error” and then point to the line that uses the innerHTML of the element that isn’t a DIV.

The solution? There are 2 possible workarounds. 1) Use a DIV, or 2) use appendChild(). I will show how to use appendChild here. I’ve tested this in IE7, FF, and Safari (Mac) and it should work. Thanks to Jeremy Keith I was able to figure it out after hours of struggling.

The following code should probably be within a function you call.

<script type="text/javascript">

var output = "dynamic output from earlier should go in this variable";

//first, create the table row and the table cell
var newtr = document.createElement("tr");
var newtd = document.createElement("td");

//place the output variable within the table cell, innerHTML here works because it's not on the page yet
//then, append the cell to the row, basically places the "<td>output here</td>" tags within the <tr></tr> tags
newtd.innerHTML = output;
newtr.appendChild(newtd);

//last, append the whole thing to the element, here it'll find the element with the "tbody_one" id, go inside, and make it the last child
document.getElementById("tbody_one").appendChild(newtr);

</script>