為什么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不是那么挑剔。 希望能幫助到你。