Solution for innerHTML in IE Tables

July 2009 Blogged by Jhoanna Marie Trigo

The property innerHTML are read-only for the following html objects:


and trying to update the value of their innerHTML property will give you ‘unknown runtime error’ in IE browser.

Though creating child elements by DOM method can resolve this, it’s still not a good idea to add all the elements needed dynamically if we have big chunks of it – forms, labels, lots of input, buttons plus their properties (class, colSpan, etc..). And more problems if the new innerHTML value must have taglibs like and . Also, creating div inside a table has broken layout in firefox. So innerHTML will still be the best solution (well it’s still up to you and the situation).

So here’s the situation: We want to replace the contents of our tr

innerHTML not working in IE.


1. First we have to get the div element, the read-only element (tr) and the new innerHTML value.

2. We’ll get the innerHTML of our div – this is the oldHTML.

3. We’ll use the method .replace([regex pattern], [new value]) to find and replace the tr element’s value from the oldHTML with the new value – so this is now our newHTML

4. Now, that we have the updated value, we will place it in the div element by using .innerHTML = newHTML.




Related Posts with Thumbnails

Thanks for rating this! Now tell the world how you feel - .
How does this post make you feel?
  • Excited
  • Fascinated
  • Amused
  • Bored
  • Sad
  • Angry

7 Responses to “Solution for innerHTML in IE Tables”

  1. June 8, 2010  -  3:27 pm

    In IE innerHTML is not working if it contains table if html content is div based then it is wokring fine.

  2. March 21, 2011  -  10:15 pm

    thx for sharing it works!

  3. March 23, 2011  -  11:04 am
    Jhoanna Marie Trigo

    Yes, tr and other elements i stated above (COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR)


  4. April 17, 2012  -  7:35 pm

    thanks for posting

  5. September 27, 2012  -  3:54 pm

    This is a bit of a hack but it’s tiny and works in both FF and IE as a workaround to IE’s inability to change innerHTML on select elements.

    function swapInnerHTML(objID,newHTML) {
    var el=document.getElementById(objID);

  6. July 25, 2013  -  3:46 pm
    Thomas Haas

    thumbs up for Tyler’s solution!

  7. September 2, 2013  -  4:06 am

    Thanks Tyler – great solution
    the second line works better as:
    el.outerHTML=el.outerHTML.replace(el.innerHTML , newHTML);

Leave a Reply