¿Por qué IE da errores inesperados al configurar innerHTML

Question

Intenté establecer innerHTML en un elemento en Firefox y funcionó bien, lo intenté en IE y recibí errores inesperados sin una razón obvia.

Por ejemplo, si intentas configurar el innerHTML de una tabla como "hi from stu", fallará, porque la tabla debe ir seguida de una secuencia.

Answer 1

"Aparentemente Firefox no es este exigente" ==> Al parecer Firefox es así que con errores, que no registra esta evidente violación de las reglas básicas de html que anidan ...

Como alguien señaló en otro foro, FireFox aceptará que anexe un documento html completo como hijo de un campo de formulario o incluso una imagen, - (

Answer 2

Acabo de descubrir que si intentas configurar innerHTML en un elemento en IE que no es lógicamente correcto, arrojará este error. Por ejemplo, si intenta configurar el innerHTML de una tabla como "hola de stu", fallará, porque la tabla debe ir seguida de una secuencia. Aparentemente, Firefox no es tan quisquilloso. Espero que ayude.

Answer 3

¿Ha intentado establecer innerText y/o textContent? Algunos nodos (como etiquetas SCRIPT) no se comportará como se espera cuando intente cambiar su innerHTML en IE. Más información aquí acerca de internalText versus textContent:

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

Answer 4

No sé por qué estás siendo modificada para la pregunta Stu, ya que esto es algo que he resuelto bastante recientemente. El truco consiste en "inyectar" el HTML en un elemento DOM que no está actualmente adjuntado al árbol de documentos. He aquí el fragmento de código que lo hace:

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

Nota que estamos utilizando únicamente el uso de jQuery en este fragmento aquí para comprobar si el navegador es Internet Explorer, no hay dependencia estricta en jQuery.

Answer 5

¿Está configurando un innerHTML completamente diferente o está reemplazando un patrón en el innerHTML? Pregunto porque si estás tratando de hacer una búsqueda/reemplazo trivial a través del 'poder' de innerHTML, encontrarás algunos tipos de elementos que no se reproducen en IE.

Esto se puede remediar con cuidado al rodear su intento en un try/catch y burbujear el DOM a través de parentNode hasta que logre lograrlo.

Pero esto no será adecuado si está insertando contenido completamente nuevo.

Answer 6

Compruebe el alcance del elemento que está tratando de configurar el innerHTML. ya que FF e IE manejan esto de otra manera

Answer 7

Está viendo ese comportamiento porque innerHTML es de solo lectura para elementos de tabla en IE. De innerHTML Property la documentación de MSDN:

La propiedad es de lectura/escritura para todos los objetos excepto los siguientes, para lo cual es de sólo lectura: COL, COLGROUP, marcos, HEAD, HTML, estilo, TABLE, TBODY, TFOOT THEAD, TITLE, TR.

Answer 8

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

Answer 9

que han estado luchando con el problema de la sustitución de una lista de enlaces en una tabla con una lista diferente de enlaces. Como se mencionó anteriormente, el problema viene con IE y su propiedad de solo lectura de los elementos de la tabla.

Añadir para mí no era una opción, así que (finalmente) resolvió esto (que funciona para Ch, FF e IE 8.0 (aún para probar otros, pero tengo la esperanza)).

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); 
} 

funciona para mí - Espero que funcione para usted

Answer 10

Puede modificar el comportamiento. Aquí hay un código que impide la recolección de basura de elementos referenciados por lo demás en el 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/