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

Question

Я попытался установить innerHTML для элемента в firefox, и это сработало нормально, попробовал это в IE и получил неожиданные ошибки без видимой причины.

Например, если вы попытаетесь установить для innerHTML таблицы значение "привет от stu ", это не удастся, потому что за таблицей должна следовать последовательность.

Answer 1

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

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

Answer 2

Вы видите такое поведение, потому что innerHTML доступен только для чтения для элементов таблицы в IE.Из MSDN's Свойство innerHTML Документация:

Свойство доступно для чтения / записи для всех объектов, кроме следующих, для которых оно доступно только для чтения:COL, COLGROUP, НАБОР ФРЕЙМОВ, HEAD, HTML, СТИЛЬ, ТАБЛИЦА, TBODY, TFOOT, THEAD, TITLE, TR.

Answer 3

Не знаю, почему вы переоцениваете вопрос 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...

Обратите внимание, что в этом фрагменте мы используем только using jQuery, чтобы проверить, является ли браузер IE, нет жесткой зависимости от jQuery.

Answer 4

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

Answer 5

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

Answer 6

Я боролся с проблемой замены списка ссылок в таблице другим списком ссылок.Как и выше, проблема связана с IE и его свойством элементов таблицы только для чтения.

Добавить для меня было невозможно, поэтому я (наконец-то) разобрался с этим (что работает для 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 7

Вы пробовали устанавливать innerText и / или textContent?Некоторые узлы (например, теги СКРИПТА) будут вести себя не так, как ожидалось, когда вы попытаетесь изменить их innerHTML в IE.Подробнее о innerText и textContent читайте здесь:

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

Answer 8

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

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

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

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

Answer 10

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