Почему IE выдает неожиданные ошибки при установке innerHTML

Question

Я попытался установить innerHTML для элемента в Firefox, и он работал нормально, попробовал его в 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

Не знаю, почему вас унизили из-за вопроса Стю, так как это то, что я решил совсем недавно. Хитрость заключается в том, чтобы «впихнуть» 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

Я боролся с проблемой замены списка ссылок в таблице другим списком ссылок. Как и выше, проблема возникает с 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 4

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

Answer 5

проверьте область действия элемента, который вы пытаетесь установить innerHTML. поскольку FF и IE обрабатывают это по-другому

Answer 6

Вы можете изменить поведение. Вот некоторый код, который предотвращает сборку мусора элементов, на которые есть ссылки в 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 7

Вы устанавливаете совершенно другой innerHTML или заменяете шаблон в innerHTML? Я спрашиваю, потому что, если вы пытаетесь выполнить тривиальный поиск / замену через 'power' innerHTML, вы обнаружите, что некоторые типы элементов не воспроизводятся в IE.

Это можно осторожно исправить, окружив вашу попытку try / catch и поднимая DOM через parentNode, пока вам не удастся это сделать.

Но это не подходит, если вы вставляете совершенно новый контент.

Answer 8

Вы пытались установить innerText и / или textContent? Некоторые узлы (например, теги SCRIPT) не будут работать должным образом, когда вы попытаетесь изменить их innerHTML в IE. Больше здесь о innerText против textContent:

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

Answer 9

«Очевидно, Firefox не такой привередливый» ==> Очевидно, FireFox настолько глючит, что не регистрирует это очевидное нарушение основных правил html-вложений ...

Как кто-то указал на другом форуме, FireFox примет, что вы добавляете весь html-документ как дочерний элемент поля формы или даже изображения, - (

Answer 10

Я только что понял, что если вы попытаетесь установить innerHTML для элемента в IE, который не является логически правильным, он выдаст эту ошибку. Например, если вы попытаетесь установить для innerHTML таблицы значение « hi from stu », произойдет сбой, поскольку за таблицей должна следовать последовательность. Очевидно Firefox не такой привередливый. Надеюсь, это поможет.