为什么IE在设置innerHTML时会出现意外错误

Question

我试图在firefox中的一个元素上设置innerHTML并且它工作正常，在IE中尝试它并且出现意外错误，没有明显的原因。

例如，如果您尝试将表的innerHTML设置为“hi from stu”，则它将失败，因为该表必须后跟一个序列。

Answer 1

您正在看到这种行为，因为innerHTML对于IE中的表元素是只读的。 从MSDN的innerHTML属性文档：

该属性是读/写的除以下所有对象，它是只读的：COL，COLGROUP，FRAMESET，HEAD，HTML，STYLE，TABLE，TBODY，TFOOT，THEAD，TITLE，TR。

Answer 2

不知道你为什么要对Stu这个问题进行修改，因为这是我最近解决的问题。 诀窍是将HTML“喷射”到当前未附加到文档树的DOM元素中。 这是执行此操作的代码段：

// 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...

请注意，我们在此片段中仅使用jQuery来测试浏览器是否为IE，对jQuery没有硬性依赖。

Answer 3

检查您尝试设置innerHTML的元素的范围。 因为FF和IE以不同的方式处理它

Answer 4

我一直在努力解决用不同的链接列表替换表中链接列表的问题。 如上所述，问题来自于IE及其表元素的readonly属性。

追加给我不是一个选项，所以我（最终）解决了这个问题（适用于Ch，FF和IE 8.0（但还是尝试其他人 - 但我很有希望））。

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);
}

适合我 - 我希望它适合你

Answer 5

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

Answer 6

“显然firefox不是这个挑剔的”==>显然FireFox是如此的错误，它没有注册这个明显违反基本的html嵌套规则......

正如有人在另一个论坛中指出的那样，FireFox会接受，你将一个完整的html文档附加为表单字段甚至图像的子项， - （

Answer 7

您是否尝试过设置innerText和/或textContent？ 当您尝试在IE中更改其innerHTML时，某些节点（如SCRIPT标记）将无法按预期运行。 更多关于innerText与textContent：

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

Answer 8

您可以修改行为。 这里有一些代码可以防止在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/

Answer 9

您是在设置完全不同的innerHTML还是替换innerHTML中的模式？ 我问，因为如果你试图通过innerHTML的'power'做一个简单的搜索/替换，你会发现某些类型的元素没有在IE中播放。

这可以通过围绕您尝试尝试/捕获并通过parentNode冒泡DOM来谨慎解决，直到您成功设法完成。

但是如果你要插入全新的内容，这将不合适。

Answer 10

我只是想通了如果你试图在IE中的一个元素上设置innerHTML，这在逻辑上是不正确的，它会抛出这个错误。 例如，如果您尝试将表的innerHTML设置为“ hi from stu ”，则它将失败，因为该表必须后跟一个序列。 显然firefox不是那么挑剔。 希望能帮助到你。