innerHTML ajouter à IE9

J'ai une page qui essaie simplement de faire ce qui suit dans une fonction javascript:innerHTML ajouter à IE9

document.getElementById("chatTable").innerHTML += "<tr><td colspan=\"3\">  ⏎ 
    <span color=\"purple\">------------Switched to channel: " + channelName + ⏎ 
    "------------</span></td></tr>";

Cela fonctionne dans tous les autres navigateurs que j'ai essayé (Firefox, Chrome, Safari, les navigateurs de téléphones Android, navigateurs iPhone) mais pas dans IE9. Oui, j'ai une table avec l'ID chatTable et la variable channelName est en effet définie. Je comprends que je peux être en mesure d'ajouter une ligne de table en utilisant le DOM pour l'objet Table (je pense que c'est insertRow() ou quelque chose) mais maintenant c'est devenu une question de principe, et ça m'a rendu fou. J'ai essayé de changer le += juste pour = et aucune chance. J'ai également essayé de placer la table à sa propre variable dans javascript et ALORS essayant d'éditer le innerHTML et toujours pas de chance. Oh et j'ai:

<!DOCTYPE HTML>

dans ma page. Qu'est-ce que je fais mal?!

Source

2012-07-09 user1510816

Le fichier Javascript s'est-il exécuté après le chargement du document? Une erreur dans la console de développement du navigateur? – Raptor

Vous ne pouvez pas utiliser .innerHTML ou .outerHTML avec l'un des éléments suivants: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, titre ou TR.

Voir Building Tables Dynamically pour utiliser le modèle d'objet de table de Microsoft pour manipuler des tables dans Internet Explorer.

Cela pourrait changer dans les futures versions de IE, je suppose, mais c'est ce qu'il vous reste pour l'instant.

Source

2012-07-09 02:21:18

Merci d'avoir éclairci ça pour moi! Je suis en train de construire la table en javascript plutôt que de l'ajouter à innerHTML et ça marche très bien. – user1510816

En plus de la réponse de Jim, lorsque vous ajoutez HTML, vous détruisez et reconstruisez la table existante. Même dans les navigateurs qui vous permettent de le faire, la solution généralement préférable d'ajouter une ligne est la suivante:

var table = document.getElementById("chatTable"), 
    row = table.insertRow(-1), //-1 means at end 
    cell = row.insertCell(0), 
    span = document.createElement("span"); 

span.style.color = "purple"; 
span.appendChild(document.createTextNode("------------Switched to channel: " + channelName + "------------")); 
cell.colSpan = 3; 
cell.appendChild(span); 
row.appendChild(cell); 
table.appendChild(row);

Il est généralement plus rapide et vous ne perdez pas de gestionnaires d'événements existants que vous avez attaché aux choses dans le tableau.

Source

2012-07-09 02:32:29 Dennis

Merci pour le code! Fonctionne magnifiquement. Une note cependant setAttribute ("color", "purple"); Ne fonctionne pas, vous devez faire: setAttribute ("style", "color: purple;"); Mais à part ça c'est parfait, merci! – user1510816

Je sortais juste de votre balisage. Je l'ai réparé. – Dennis

Oh, je suppose que j'ai mis ça ... – user1510816

innerHTML ajouter à IE9

Répondre

Questions connexes