Skip to content


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”. 😉

Posted in Javascript, Software Development, Tips and Tricks.

Tagged with , , , , .


5 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. Adam says

    Hey, thanks for fixing that bug for me. You rock!

  2. jtanium says

    Well it was my JavaScript in the first place…

  3. Andreas says

    Firefox 3.6 has the same behavoir… still!
    I struggle for that problem for about 6 hours until I found your post 😉

  4. Cire Zerep says

    Thank you for this! Like someone said, Firefox 3.6 still cannot handle this example! I struggled for hours trying to figure out why every other browser I tried including IE 7, Safari, and newer versions of Firefox (4.0+) worked fine using code like your first example (which seems logical to set the innerHTML property first and then add the element to the DOM.) Simply switching the order of the statements fixed the issue in Firefox 3.6.

Continuing the Discussion

  1. Firefox is a thief, and not to be trusted. | GRG Components linked to this post on August 27, 2010

    […] Firefox really hates when <td> or <tr> tags appear outside of a <table>, and will trim them right out. Fortunately, there’s a way around this, albeit a little […]



Some HTML is OK

or, reply to this post via trackback.