Pourquoi document.getElementById ('tableId'). InnerHTML ne fonctionne pas dans IE8?

Question

Je modifie document.getElementById('').innerHTML avec Java Script dans une page. Cela fonctionne bien dans Firefox, mais pas IE8. S'il vous plaît voir ci-dessous pour plus de détails:

Code HTML:

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

code Java Script:

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

Quand je lance le code JS dans Firefox, il va changer le mot d'affichage de « ccc 'à' abc ', mais ça ne marche pas dans IE8, est-ce que quelqu'un sait pourquoi? Y a-t-il un moyen de faire fonctionner IE8 aussi?

Answer 1

Puisque le problème est dans IE8, see MSDN:

La propriété est en lecture/écriture pour tous les objets sauf les éléments suivants, pour lesquels il est en lecture seule: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLEAU, TBODY, TFOOT, THEAD, TITRE, TR.

(Souligné par l'auteur)

Colin's work-around (réglage innerText sur la td au lieu de innerHTML sur le tr) est un bon dans votre cas. Si vos besoins deviennent plus complexes, vous devrez recourir au The Table Object Model.

Answer 2

Utilisez ce lieu:

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

Answer 3

Je crois que IE se comporte étrangement lorsque vous jouez avec le innerHTML des éléments tr. Je choisirais la ligne avec getElementById, puis sélectionnez le td et modifier celui de la innerHTML:

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

(Bien que vous devez faire attention à ceci: souvent les espaces entre les tr et td sera considérée comme valide noeud)

Il y a un tas de fonctions spéciales pour travailler avec des tables dans les DOM

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

Voir toutes les fonctions ici: http://www.mredkj.com/tutorials/tablebasics1.html

Answer 4

innerHTML est en lecture seule pour comme indiqué ici: http://msdn.microsoft.com/en-us/library/ms533897%28VS.85%29.aspx

La propriété est en lecture/écriture pour tous les objets sauf les éléments suivants, pour lesquels il est en lecture seule: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITRE, TR. Pourquoi ne pas simplement mettre une idée sur le et changer cette valeur particulière?

Answer 5

Depuis est en lecture seule innerHTML de TR en tant que peu de gens ont dit, vous êtes mieux de changer votre balisage pour cibler le TD:

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

vous pouvez définir le contenu de la TD que vous le souhaitez via innerHTML et modifier d'autres propriétés en les plaçant sur le nœud DOM:

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

vous avez l'idée ...

Cela vous évite les frais généraux de détruire et de créer un supplément élément DOM (la TD)

Answer 6

Au lieu d'un <div></div>, vous pouvez également utiliser <span></span>

Answer 7

Sur une autre question StackOverflow j'ai trouvé un lien vers un blog écrit par le gars qui a mis en œuvre cette partie du moteur Trident. Il s'agit d'un défaut de conception (en raison d'un manque de temps et de problèmes de compatibilité descendante) qui n'a jamais été corrigé. Vous pouvez read his notes (including his personal workaround) here. Cependant, pour le réparer sur mon projet, puisque j'utilisais déjà jQuery, j'ai simplement utilisé la fonction .html() de jQuery.

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

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

Answer 8

Merci sa très utile .html()

J'utilisais

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

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