Why does IE give unexpected errors when setting innerHTML

Question

I tried to set innerHTML on an element in firefox and it worked fine, tried it in IE and got unexpected errors with no obvious reason why.

For example if you try and set the innerHTML of a table to " hi from stu " it will fail, because the table must be followed by a sequence.

Shelli

A code excerpt could have been useful... – Dingle

Answer 1

"Apparently firefox isn't this picky" ==> Apparently FireFox is so buggy, that it doesn't register this obvious violation of basic html-nesting rules ...

As someone pointed out in another forum, FireFox will accept, that you append an entire html-document as a child of a form-field or even an image ,-(

Gimmal

The purpose of browsers is to present the information provided to the user as best they can - that means attempting to recover from author errors. – Leffert

Answer 2

You're seeing that behaviour because innerHTML is read-only for table elements in IE. From MSDN's innerHTML Property documentation:

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

Thracophrygian

It also caused issues for me on the SCRIPT object. – Marquetry

Answer 3

Don't know why you're being down-modded for the question Stu, as this is something I solved quite recently. The trick is to 'squirt' the HTML into a DOM element that is not currently attached to the document tree. Here's the code snippet that does it:

// removing the scripts to avoid any 'Permission Denied' errors in IE
var cleaned = html.replace(/<script(.|\s)*?\/script>/g, "");

// IE is stricter on malformed HTML injecting direct into DOM. By injecting into 
// an element that's not yet part of DOM it's more lenient and will clean it up.
if (jQuery.browser.msie)
{
    var tempElement = document.createElement("DIV");
    tempElement.innerHTML = cleaned;
    cleaned = tempElement.innerHTML;
    tempElement = null;
}
// now 'cleaned' is ready to use...

Note we're using only using jQuery in this snippet here to test for whether the browser is IE, there's no hard dependency on jQuery.

Mohammadmohammed

Answer 4

check the scope of the element you are trying to set the innerHTML. since FF and IE handle this in a different way

Schrecklichkeit

Answer 5

http://www.ericvasilik.com/2006/07/code-karma.html

Sugarplum

Interesting story. It is not a big deal simply that IE has this bug. However, I am mad that they have known about this bug for at least 12 years and it STILL isn't fixed. It is in IE8. – Stichter

Answer 6

I have been battling with the problem of replacing a list of links in a table with a different list of links. As above, the problem comes with IE and its readonly property of table elements.

Append for me wasn't an option so I have (finally) worked out this (which works for Ch, FF and IE 8.0 (yet to try others - but I am hopeful)).

replaceInReadOnly(document.getElementById("links"), "<a href>........etc</a>");

function replaceInReadOnly(element, content){
    var newNode = document.createElement();
    newNode.innerHTML = content;
    var oldNode = element.firstChild;
    var output = element.replaceChild(newNode, oldNode);
}

Works for me - I hope it works for you

Disparate

Answer 7

Have you tried setting innerText and/or textContent? Some nodes (like SCRIPT tags) won't behave as expected when you try to change their innerHTML in IE. More here about innerText versus textContent:

http://blog.coderlab.us/2006/04/18/the-textcontent-and-innertext-properties/

Mudskipper

Answer 8

Are you setting a completely different innerHTML or replacing a pattern in the innerHTML? I ask because if you're trying to do a trivial search/replace via the 'power' of innerHTML, you will find some types of element not playing in IE.

This can be cautiously remedied by surrounding your attempt in a try/catch and bubbling up the DOM via parentNode until you successfully manage to do it.

But this is not going to be suitable if you're inserting brand-new content.

Dogmatist

Answer 9

You can modify the behavior. Here is some code that prevents garbage collection of otherwise-referenced elements in IE:

if (/(msie|trident)/i.test(navigator.userAgent)) {
 var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
 var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
 Object.defineProperty(HTMLElement.prototype, "innerHTML", {
  get: function () {return innerhtml_get.call (this)},
  set: function(new_html) {
   var childNodes = this.childNodes
   for (var curlen = childNodes.length, i = curlen; i > 0; i--) {
    this.removeChild (childNodes[0])
   }
   innerhtml_set.call (this, new_html)
  }
 })
}

var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)

document.body.innerHTML = ""
console.log (mydiv.innerHTML)

http://jsfiddle.net/DLLbc/9/

Brief

Answer 10

I just figured out that if you try to set innerHTML on an element in IE that isn't logically correct it will throw this error. For example if you try and set the innerHTML of a table to " hi from stu " it will fail, because the table must be followed by a sequence. Apparently firefox isn't this picky. Hope it helps.

Shelli

My point here was this: Stackoverflow was intended to be a place where people could go for good technical answers to technical questions. I had found out something non-obvious and thought I'd add it to the knowledgebase. There's no way to do that without writing a question, so I did and answered it. – Shelli

You could be getting downvoted because most of this answer actually belongs in the question - you didn't originally say exactly what you were trying to do. I've moved some of it to the question now. – Thracophrygian