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

【问题标题】：Why does IE give unexpected errors when setting innerHTML为什么IE在设置innerHTML时会出现意外错误
【发布时间】：2010-09-14 09:38:00
【问题描述】：

我尝试在 firefox 中的一个元素上设置 innerHTML，它运行良好，在 IE 中尝试它并出现意外错误，没有明显的原因。

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

【问题讨论】：

代码摘录可能有用...

标签： javascript internet-explorer innerhtml

【解决方案1】：

您会看到这种行为，因为 innerHTML 对于 IE 中的表格元素是只读的。来自 MSDN 的 innerHTML Property 文档：

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

【讨论】：

这也给我在 SCRIPT 对象上造成了问题。

【解决方案2】：

不知道为什么你会因为 Stu 的问题而被降级，因为这是我最近解决的问题。诀窍是将HTML“喷射”到当前未附加到文档树的DOM元素中。这是执行此操作的代码 sn-p：

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

注意我们这里sn-p中只使用jQuery来测试浏览器是否为IE，对jQuery没有硬依赖。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

有趣的故事。 IE 有这个 bug 并不是什么大问题。但是，我很生气他们知道这个错误至少 12 年，但它仍然没有修复。它在 IE8 中。

【解决方案5】：

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

Append for me 不是一个选项，所以我（最终）解决了这个问题（适用于 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);
}

对我有用 - 我希望它对你有用

【讨论】：

【解决方案6】：

“显然 firefox 不那么挑剔” ==> 显然 FireFox 有很多缺陷，以至于它没有记录这种明显违反基本 html 嵌套规则的行为 ...

正如有人在另一个论坛中指出的那样，FireFox 会接受，您将整个 html 文档附加为表单域甚至图像的子级，-(

【讨论】：

浏览器的目的是尽可能地向用户呈现提供给用户的信息——这意味着试图从作者错误中恢复。

【解决方案7】：

您是否尝试过设置 innerText 和/或 textContent？当您尝试在 IE 中更改它们的 innerHTML 时，某些节点（如 SCRIPT 标记）的行为将不会像预期的那样。更多关于 innerText 与 textContent 的信息：

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

【讨论】：

【解决方案8】：

您是在设置完全不同的 innerHTML 还是替换了 innerHTML 中的模式？我问是因为如果您尝试通过 innerHTML 的“功能”进行微不足道的搜索/替换，您会发现某些类型的元素不在 IE 中播放。

这可以通过在 try/catch 中包围你的尝试并通过 parentNode 冒泡 DOM 直到你成功地做到这一点来谨慎地解决。

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

【讨论】：

【解决方案9】：

您可以修改行为。下面是一些防止在 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/

【讨论】：

【解决方案10】：

我刚刚发现，如果您尝试在 IE 中的一个逻辑上不正确的元素上设置 innerHTML，则会引发此错误。例如，如果您尝试将表格的 innerHTML 设置为“ hi from stu ”，它将失败，因为表格后面必须有一个序列。显然firefox不是那么挑剔。希望对您有所帮助。

【讨论】：

我的意思是：Stackoverflow 旨在成为人们可以为技术问题寻求良好技术答案的地方。我发现了一些不明显的东西，并认为我会将其添加到知识库中。不写问题就没有办法做到这一点，所以我做了并回答了。
你可能会被否决，因为这个答案的大部分实际上都属于这个问题——你最初并没有确切地说出你想要做什么。我现在已经把其中的一部分移到了这个问题上。