'innerText' fonctionne dans IE, mais pas dans Firefox

Question

J'ai du code JavaScript qui fonctionne dans IE contenant ce qui suit:

myElement.innerText = "foo";

Cependant, il semble que la propriété 'innerText' ne fonctionne pas dans Firefox. Y a-t-il un équivalent dans Firefox? Ou existe-t-il une propriété plus générique, multi-navigateur qui peut être utilisée?

Answer 1

Mise à jour : J'ai écrit un article de blog détaillant toutes les différences bien mieux.

---

Firefox utilise la norme W3C Node::textContent, mais son comportement diffère "légèrement" de celui de innerText propriétaire de MSHTML (copié par Opera également, il y a quelque temps, parmi des dizaines d'autres fonctionnalités de MSHTML).

Tout d'abord, la représentation des espaces blancs de textContent est différente de celle de innerText. Deuxièmement, et plus important encore, textContent inclut l'intégralité du contenu de la balise SCRIPT, alors que innerText ne le fait pas.

Juste pour rendre les choses plus divertissantes, Opera - en plus de mettre en œuvre le textContent standard - a décidé d'ajouter également le innerText de MSHTML mais l'a modifié pour agir comme textContent - c'est-à-dire en incluant le contenu du SCRIPT (en fait, textContent et innerText dans Opera semblent produire des résultats identiques, étant probablement juste des alias l'un de l'autre).

textContent fait partie de l'interface Node, tandis que innerText fait partie de HTMLElement. Cela signifie, par exemple, que vous pouvez "récupérer" textContent mais pas innerText à partir des nœuds de texte :

var el = document.createElement('p');
var textNode = document.createTextNode('x');

el.textContent; // ""
el.innerText; // ""

textNode.textContent; // "x"
textNode.innerText; // undefined

Enfin, Safari 2.x a également une implémentation buggy de innerText. Dans Safari, innerText fonctionne correctement uniquement si un élément n'est ni caché (via style.display == "none") ni orphelin dans le document. Sinon, innerText renvoie une chaîne vide.

J'ai essayé de jouer avec l'abstraction de textContent (pour contourner ces lacunes), mais cela s'est avéré être plutôt complexe.

Votre meilleure option est de définir d'abord vos besoins exacts et de suivre à partir de là. Il est souvent possible de simplement supprimer les balises de innerHTML d'un élément, plutôt que de gérer toutes les éventuelles déviations de textContent/innerText.

Une autre possibilité, bien sûr, est de parcourir l'arbre DOM et de collecter récursivement les nœuds de texte.

Answer 2

Firefox utilise la propriété textContent conforme à la norme W3C.

Je suppose que Safari et Opera prennent également en charge cette propriété.

Answer 3

Si vous avez seulement besoin de définir le contenu texte et pas de le récupérer, voici une version du DOM triviale que vous pouvez utiliser sur n'importe quel navigateur; il ne nécessite ni l'extension innerText de IE ni la propriété textContent du DOM Level 3 Core.

function setTextContent(element, text) {
    while (element.firstChild!==null)
        element.removeChild(element.firstChild); // remove all existing content
    element.appendChild(document.createTextNode(text));
}

Answer 4

jQuery fournit une méthode .text() qui peut être utilisée dans n'importe quel navigateur. Par exemple :

$('#myElement').text("Foo");

Answer 5

Comme indiqué dans la réponse de Prakash K, Firefox ne prend pas en charge la propriété innerText. Vous pouvez simplement tester si l'agent utilisateur prend en charge cette propriété et agir en conséquence comme indiqué ci-dessous :

function changeText(elem, changeVal) {
    if (typeof elem.textContent !== "undefined") {
        elem.textContent = changeVal;
    } else {
        elem.innerText = changeVal;
    }
}