web-dev-qa-db-fra.com

innerText vs innerHtml vs label vs texte vs textContent vs outerText

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

Tout en décidant quelle devrait être la valeur par défaut à afficher lors du chargement, je me suis rendu compte que les propriétés suivantes affichaient exactement les mêmes valeurs:

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

Mes propres recherches montrent 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 l'un ou l'autre, car ils fournissent le même résultat, mais je crains que cela ne soit pas une bonne idée si les données devaient changer.

Mes découvertes sont:

  • innerText affichera la valeur telle quelle et ignorera tout formatage HTML pouvant être inclus
  • innerHTML affichera la valeur et appliquera tout formatage HTML
  • label est identique à innerText, je ne vois pas la différence
  • text semble être identique à innerText mais la version abrégée de jQuery
  • textContent est identique à innerText mais conserve le formatage (tel que \n) 
  • outerText semble être identique à innerText

Ma recherche ne peut me mener que dans la mesure où je ne peux que tester ce que je peux penser ou lire de ce qui est publié. Peut-on confirmer si ma recherche est correcte et s’il ya quelque chose de spécial à propos de label et outerText

javascripthtmldom
94
MyDaftQuestions

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 bien que textContent récupère le contenu de tous les éléments, y compris les éléments <script> et <style>, la propriété essentiellement équivalente spécifique à IE, innerText, ne le fait pas.

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

  • Comme innerText est conscient du style CSS, cela entraînera un refoulement, contrairement à textContent.

Donc, innerText n'inclura pas le texte masqué par CSS, mais textContent le sera. 

innerHTML renvoie le code 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 devrait être utilisé à la place. Étant donné que le texte n'est pas analysé au format HTML, les performances sont donc meilleures. 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: Do not utilisez .innerHTML sauf si vous avez précisément l'intention d'insérer du HTML dans un élément et que vous avez pris les précautions nécessaires pour vous assurer que le HTML que vous insérez ne peut pas contenir contenu malveillant. Si vous souhaitez uniquement insérer du texte, utilisez .textContent ou si vous devez prendre en charge IE8 et les versions antérieures, utilisez la détection de fonctionnalité pour désactiver .textContent et .innerText.

L'une des principales raisons de l'existence d'un si grand nombre de propriétés différentes est que les différents navigateurs portaient à l'origine des noms différents pour ces propriétés et que la prise en charge croisée des navigateurs n'est toujours pas complète. Si vous utilisez jQuery, vous devriez vous en tenir à .text(), car il est conçu pour atténuer les différences entre les navigateurs. *

Pour certains des autres: outerHTML est fondamentalement identique à 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 de outerText du tout. Je pense que c'est probablement une propriété obscure héritée et devrait être évitée.

87
JLRishe

Une liste déroulante comprend une collection de Option objets. Vous devez donc utiliser la propriété .text pour examiner la représentation textuelle de l'élément, c'est-à-dire.

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

Btw,

.text semble être identique à .innerText mais la version abrégée de JQuery

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

7
Ja͢ck

Addendum à JLRishe est par ailleurs une excellente réponse:

La raison pour laquelle innerText et outerText existent est la symétrie avec innerHTML et outerHTML. Cela devient important lorsque vous attribuez à la propriété.

Supposons que vous ayez un élément e avec le 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!
6
Anonymous

Voir la compatibilité des navigateurs http://www.quirksmode.org/dom/html/ si vous ciblez des navigateurs spécifiques. Parce qu'il semble qu'ils ont tous leur propre façon de faire les choses. C’est pourquoi il est préférable d’utiliser JQuery .text () ( http://api.jquery.com/text/ ) si vous ne voulez pas vous amuser.

1
nywooz

textContent ne formatera pas (\ n)

0
Hariharan