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


26 of April2008

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>

Your Words


  1. that’s strange… i’m gonna guess you meant to put that all in a tag and not a tag, but then again, i’ve never actually tried it.

  2. Jeremy: You’re absolutely right. Thanks for pointing that out. I fixed it.

  3. No 3 by
    dan

    I just came across this error and found your page on a search. Baffled because ive been throwing crap around in innerHTML for months and never seen this problem before. Based on what I found with this problem there is something you should consider that is probably the real source of the problem.

    check the surrounding html of the object you are manipulating and/or the object it is attached to. there is a very good chance that you have malformed html right nearby either of these objects. the browser may not care on initial render, but when new html is being pulled in there seems to be some extra validation requirement going on with ie. for instance a div tag improperly nested in a table . trying to feel another element into that div via innerHTML would cause the same error. but move the div over into the properly would allow you to continue.

    Your work around tricks IE into ignoring the surrounding html when making the assignment because it doesnt know where it will be attached yet.

  4. No 4 by
    Kerry Russo

    I found this explanation on a forum:

    “You can not write a partial table using innerhtml with IE.
    Use proper DOM methods or write a full (valid) table.
    http://support.microsoft.com/kb/239832

    source: http://www.webdeveloper.com/forum/showthread.php?t=178849

  5. [...] InnerHTML in IE7 problems [...]

  6. [...] InnerHTML in IE7 problems [...]

  7. No 7 by
    Chris

    Thanks Dan (no3 above) – your mention of malformed HTML led me to track down the issue in an IE7 vs IE9 issue with InnerHTML.

    It worked perfectly in IE9, but deployed badly to IE7 – and there was an extra ‘ in a nearby tag which was ignored in IE9, but caused the innerHTML to act weird.

Add Your Own