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:
7 thoughts on “Solution for innerHTML in IE Tables”
In IE innerHTML is not working if it contains table if html content is div based then it is wokring fine.
thx for sharing it works!
@jit
Yes, tr and other elements i stated above (COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR)
@randomdev
welcome.
thanks for posting
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+”);
}
thumbs up for Tyler’s solution!
Thanks Tyler – great solution
the second line works better as:
el.outerHTML=el.outerHTML.replace(el.innerHTML , newHTML);