innerText vs innerHTML vs label vs text vs textContent vs externalText

124

J'ai une liste déroulante qui est remplie par Javascript.

En décidant quelle devrait être la valeur par défaut à afficher lors du chargement, j'ai réalisé que les propriétés suivantes montraient exactement les mêmes valeurs:

  • innerText
  • innerHtml
  • label
  • text
  • textContent
  • outerText

Ma propre recherche montre des tests d'évaluation ou des comparaisons entre quelques-uns d'entre eux, mais pas tous.

Je peux utiliser mon propre bon sens et choisir 1 ou l'autre car ils donnent le même résultat, mais je crains que ce ne soit pas une bonne idée si les données devaient changer.

Mes conclusions sont:

  • innerText affichera la valeur telle quelle et ignorera tout formatage HTML pouvant être inclus
  • innerHTML affichera la valeur et appliquera toute mise en forme HTML
  • labelsemble être le même que innerText, donc je ne vois pas la différence
  • textsemble être la même que innerTextla version abrégée de jQuery
  • textContentsemble identique à innerTextmais conserve le formatage (tel que \n)
  • outerText semble être le même que innerText

Mes recherches ne peuvent m'amener que dans la mesure où je ne peux tester que ce que je peux penser ou lire ce qui est publié, est-ce que quelqu'un peut confirmer si ma recherche est correcte et s'il y a quelque chose de spécial à propos de labelet outerText?

javascript  html  dom 
— MyDaftQuestions
source
11
L'une des raisons pour lesquelles il existe tant de façons différentes d'accéder au texte est due aux différences entre les navigateurs. Si vous utilisez déjà jQuery, vous devriez l'utiliser .text()pour obtenir le contenu textuel d'un élément, car cela fournira une prise en charge maximale de tous les navigateurs.
— JLRishe
2
— JLRishe

Réponses:

101

De MDN :

Internet Explorer a introduit element.innerText. L'intention est à peu près la même [que textContent] avec quelques différences:

  • Notez que si textContent obtient le contenu de tous les éléments, y compris les éléments <script>et <style>, la propriété spécifique à IE la plus équivalente, innerText, ne le fait pas.

  • innerText est également conscient du style et ne retournera pas le texte des éléments masqués, contrairement à textContent.

  • Comme innerText est conscient du style CSS, il déclenchera une redistribution, contrairement à textContent.

N'inclura donc innerTextpas le texte masqué par CSS, mais le textContentfera.

innerHTML renvoie le HTML comme son nom l'indique. Très souvent, pour récupérer ou écrire du texte dans un élément, les gens utilisent innerHTML. textContent doit être utilisé à la place. Étant donné que le texte n'est pas analysé au format HTML, il est susceptible d'avoir de meilleures performances. De plus, cela évite un vecteur d'attaque XSS.

Au cas où vous auriez manqué cela, permettez-moi de le répéter plus clairement: ne pas utiliser à .innerHTMLmoins que vous n'ayez spécifiquement l'intention d'insérer du HTML dans un élément et que vous ayez pris les précautions nécessaires pour vous assurer que le HTML que vous insérez ne peut pas contenir de contenu malveillant. Si vous souhaitez uniquement insérer du texte, utilisez .textContentou si vous devez prendre en charge IE8 et versions antérieures, utilisez la détection de fonction pour désactiver entre .textContentet .innerText.

L'une des principales raisons pour lesquelles il existe tant de propriétés différentes est que différents navigateurs avaient à l'origine des noms différents pour ces propriétés et qu'il n'y a toujours pas de prise en charge complète de tous les navigateurs. Si vous utilisez jQuery, vous devez vous en tenir à .text()car cela est conçu pour lisser les différences entre les navigateurs. *

Pour certains des autres: outerHTMLest fondamentalement le même que innerHTML, sauf qu'il inclut les balises de début et de fin de l'élément auquel il appartient. Je n'arrive pas à trouver beaucoup de description du outerTexttout. Je pense que c'est probablement une propriété héritée obscure et devrait être évitée.

— JLRishe
source
3
Le problème avec les conseils de ce document in order to retrieve or write text within an element, people use innerHTML. textContent should be used instead, c'est que textContent n'est pas pris en charge par IE 8, qui est encore assez largement utilisé car c'est la version fournie avec Windows 7. Et FireFox ne prend pas en charge innerText . Ainsi, bien que innerHTML ne soit pas parfaitement adapté à cette fin, il offre une meilleure fiabilité entre les navigateurs.
— Adi Inbar
5
@AdiInbar Si vous avez besoin de prendre en charge d'anciens navigateurs, la bonne chose à faire est d'utiliser la détection de fonctionnalités pour désactiver entre .textContentet .innerText, ou d'utiliser quelque chose comme jQuery qui atténue ces différences de navigateur.
— JLRishe
1
Merci beaucoup pour cette explication! J'utilise flot pour afficher des graphiques et cela ne s'affiche pas dans ff car ff utilise textContent. Innertext était toujours indéfini lorsque j'utilisais le tickFormatter.
— Rainhider
1
@bvl Vous ne pouvez pas utiliser textContentavec des balises HTML. Si vous avez besoin d'insérer du HTML, vous utiliserez .innerHTMLou construiriez des nœuds HTML en utilisant document.createElement(), etc.
— JLRishe
4
Sécurité: une utilisation incorrecte de innerHTML(contrairement à textContent) peut ouvrir la porte à des attaques XSS (Cross-Site Scripting) sur votre application. Si le contenu inséré dans le DOM via innerHTMLn'est pas entièrement fiable, un attaquant pourrait utiliser un <script>élément pour détourner votre application authentifiée sous le niveau d'autorisation d'un utilisateur ou d'un administrateur. Toutes les attaques, y compris les attaques d'apparence étrange <img src="x.x" onerror="alert('Hacked!');"/>et une myriade de attaques plus sournoises, sont efficacement détruites en les utilisant simplement textContentdans ce contexte au lieu des dangereuses innerHTML.
— ChaseMoskal
8

Une liste déroulante comprend une collection d' Optionobjets, vous devez donc utiliser la .textpropriété pour inspecter la représentation textuelle de l'élément, c'est-à-dire

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.textsemble être la même que .innerTextla version abrégée de JQuery

Ce n'est pas correct; $(element).text()est la version jQuery alors que element.textc'est la version d'accès à la propriété.

— Jack
source
5

Addendum à la réponse par ailleurs excellente de JLRishe:

La raison pour laquelle innerText et externalText existent tous les deux est pour la symétrie avec innerHTML et externalHTML. Cela devient important lorsque vous attribuez à la propriété.

Supposons que vous ayez un élément eavec du code HTML <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!
— Anonyme
source
0

textet labelsupprimez les espaces supplémentaires. J'ai obtenu ces résultats lors de la recherche d'options dans une liste déroulante:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"
— Jay Jay
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.