Firefox Gotcha: innerHTML Strips td Tags

Try and run the following in Firefox, and it’s gonna tell you “you’re screwed”:

var newTable = document.createElement('table');
var rowContent = '<td>some stuff</td><td><em>something else</em></td>';
var newTr = document.createElement('tr');
newTr.innerHTML = rowContent;
newTable.appendChild(newTr);

if ('<td>some stuff</td><td><em>something else</em></td>' == newTr.innerHTML) {
    alert("Everything's hunkydory");
}
else {
    alert("You're screwed");
}

Why? My guess is Firefox doesn’t like it when you add td tags to elements that aren’t in a table, so it strips them. After doing the innerHTML assignment

<td>some stuff</td><td><em>something else</em></td>

becomes

some stuff<em>something else</em>

Fortunately, the solution is easy, just append the tr before the innerHTML assignment:

newTable.appendChild(newTr);
newTr.innerHTML = rowContent;

Then you’ll see “Everything’s hunkydory”.