Perché document.getElementById (‘tableId’). InnerHTML non funziona in IE8?

Modifico document.getElementById('').innerHTML con Java Script in una pagina. Funziona bene in Firefox, ma non IE8. Si prega di vedere sotto per maggiori dettagli:

Codice HTML:

 
ccc

Codice di script Java:

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

Quando eseguo il codice JS in Firefox, cambierà la parola di visualizzazione da “ccc” a “abc”, ma non funziona in IE8, qualcuno sa perché? C’è un modo per far funzionare anche questo in IE8?

Poiché il problema è in IE8, vedere MSDN :

La proprietà è di lettura / scrittura per tutti gli oggetti eccetto il seguente, per il quale è di sola lettura: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TODO, TFOOT, THEAD, TITLE, TR .

(sottolineatura mia)

Il work-around di Colin (impostare innerText sul td invece di innerHTML sul tr ) è buono nel tuo caso. Se i tuoi bisogni diventano più complessi, dovrai ricorrere a The Table Object Model .

Poiché innerHTML di TR è di sola lettura, come hanno detto alcune persone, è meglio cambiare il markup per scegliere come target il TD:

 
...

Quindi puoi impostare il contenuto del TD come desideri tramite innerHTML e modificare altre proprietà impostandole sul nodo DOM:

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

Hai l’idea …

Questo ti risparmia l’overhead di distruggere e creare un elemento DOM extra (il TD)

Su un’altra domanda StackOverflow ho trovato un collegamento a un post sul blog scritto dal ragazzo che ha implementato quella parte del motore Trident. È un difetto di progettazione (a causa della mancanza di tempo e problemi di compatibilità con le versioni precedenti) che non è mai stato risolto. Puoi leggere i suoi appunti (compresa la sua soluzione personale) qui .

Tuttavia, per risolvere il problema sul mio progetto, poiché stavo già usando jQuery, ho semplicemente usato la funzione .html() di jQuery.

 // OLD localRows[cIndex].innerHTML = '
Test Div
'; // FIXED $(localRows[cIndex]).html('
Test Div
');

Credo che IE si comporta in modo strano quando giochi con l’HTML interno di tr elementi. Vorrei selezionare la riga con getElementById , quindi selezionare il td e modificare il proprio innerHTML:

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

(Anche se devi stare attento a questo: spesso lo spazio bianco tra tr e td sarà considerato un nodo valido)

C’è un intero mucchio di funzioni speciali per lavorare con le tabelle nel DOM

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

Vedi tutte le funzioni qui: http://www.mredkj.com/tutorials/tablebasics1.html

innerHTML è in sola lettura per come indicato qui: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

La proprietà è di lettura / scrittura per tutti gli oggetti eccetto il seguente, per il quale è di sola lettura: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TODO, TFOOT, THEAD, TITLE, TR.

Perché non stai solo mettendo un’idea intorno e cambiando quel particolare valore?

Invece di un

, puoi anche usare

Grazie molto utile .html()

Stavo usando

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

Usa questo invece:

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