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

StackOverflow https://stackoverflow.com/questions/155426

题

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

例如，如果您尝试将表的innerHTML设置为“嗨，来自stu“它会失败，因为表必须跟一个序列。

有帮助吗？

解决方案

“显然火狐不是这个挑剔的” ==＆GT;显然FireFox是如此的错误，它没有记录这种明显违反基本的html嵌套规则......

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

其他提示

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

  

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

不知道为什么你会因为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没有硬性依赖。

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

我一直在努力解决用不同的链接列表替换表格中的链接列表的问题。如上所述，问题在于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);
}

适合我 - 我希望它适合你

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

http://blog.coderlab.us/2006/04/18 /所述-的TextContent - 和 - 的innerText的属性/

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

通过围绕try / catch的尝试并通过parentNode冒泡DOM，直到您成功设法完成，可以谨慎地解决这个问题。

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

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top