Ideyatech Logo

Solution for innerHTML in IE Tables

July 2009 Posted by Jhoanna Marie Trigo

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

COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR

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.

Solution:

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.

Javascript:


	




Related Posts with Thumbnails

7 Responses to “Solution for innerHTML in IE Tables”

  1. June 8, 2010  |  3:27 pm
    jit

    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
    randomdev

    thx for sharing it works!

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

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

    @randomdev
    welcome.

  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);
    el.outerHTML=el.outerHTML.replace(el.innerHTML+”,newHTML+”);
    }

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

    thumbs up for Tyler’s solution!

  7. September 2, 2013  |  4:06 am
    Adrian

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

Leave a Reply

Copyright © 2012 Ideyatech, Inc. All Rights Reserved.