¿Por qué document.getElementById ('tableId'). InnerHTML no funciona en IE8?

Question

Modifico document.getElementById('').innerHTML con Java Script en una página. Funciona bien en Firefox, pero no en IE8. Por favor, ver más abajo para más detalles:

HTML Code: código

<table> 
    <tr id="abc"> 
    <td id="ccc" style="color:red;">ccc</td> 
    </tr> 
</table> 

Java Script:

document.getElementById('abc').innerHTML = '<td id="bbc" style="color:yellow;">abc</td>' 

Cuando ejecuto el código JS en Firefox, que va a cambiar la palabra pantalla de 'ccc 'a' abc ', pero simplemente no funciona en IE8, ¿alguien sabe por qué? ¿Hay alguna forma en que pueda hacer que esto funcione en IE8 también?

Answer 1

Dado que el problema es en IE8, see 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.

(el énfasis es mío)

Colin's work-around (innerText establecer en el lugar de tdinnerHTML en el tr) es una buena en su caso. Si sus necesidades se vuelven más complejas, tendrá que recurrir al The Table Object Model.

Answer 2

Use este lugar:

document.getElementById('abc').innerText = 'ccc'; 

Answer 3

Creo IE comporta de forma extraña cuando se juega con el innerHtml tr elementos. Me gustaría seleccionar la fila con getElementById, y luego seleccione el TD y alterar de que uno innerHtml:

document.getElementById('abc').firstChild.innerHTML = 'abc'; 

(Aunque hay que tener cuidado con esto: a menudo el espacio en blanco entre el TR y el TD se considerará válida nodo)

Hay todo un montón de funciones especiales para trabajar con tablas en el DOM

var tblBody = document.getElementById(tblId).tBodies[0]; 
var newRow = tblBody.insertRow(-1); 
var newCell0 = newRow.insertCell(0); 

Ver todas las funciones aquí: http://www.mredkj.com/tutorials/tablebasics1.html

Answer 4

innerHTML es de sólo lectura para como se ha señalado aquí: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

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

¿Por qué no solo está planteando una idea y cambiando ese valor en particular?

Answer 5

Desde innerHTML de TR es de sólo lectura como algunas personas han dicho, es mejor cambiar su margen de beneficio para apuntar el TD:

<table><tr><td id="changeme"> ... </td></tr></table> 

entonces se puede establecer el contenido de la TD como desee a través innerHTML, y cambiar otras propiedades estableciendo su valor en el nodo DOM:

var td = document.getElementById("changeme"); 
td.innerHTML = "New Content"; 
td.cssText = "color: red"; 
td.className = "highlighted"; 

usted consigue la idea ...

Esto le ahorra la sobrecarga de la destrucción y la creación de un extra elemento DOM (TD)

Answer 6

En lugar de un <div></div>, también se puede utilizar <span></span>

Answer 7

En otra pregunta StackOverflow me encontré con un enlace a un blog escrito por el tipo que implementa la parte del motor Trident. Es un defecto de diseño (debido a la falta de tiempo y problemas de compatibilidad con versiones anteriores) que nunca se solucionó. Puede read his notes (including his personal workaround) here.

Sin embargo, para solucionarlo en mi proyecto, como ya estaba usando jQuery, acabo de utilizar la función .html() de jQuery.

// OLD 
localRows[cIndex].innerHTML = '<div>Test Div</div>'; 

// FIXED 
$(localRows[cIndex]).html('<div>Test Div</div>'); 

Answer 8

Gracias a su gran ayuda .html()

que estaba usando

document.getElementById('site'+cValue).innerHTML=tableReadyElem; //work with mozila not ie 

$(document.getElementById('site'+cValue)).html(tableReadyElem);//work for both