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: