InnerHTML vs InnerText vs TextContent : un guide

Lorsque vous récupérez ou définissez un élément dans Javascriptvous avez beaucoup d’options, dont beaucoup semblent exactement les mêmes.

Dans cet article, je décomposerai les différences subtiles entre innerHTML, innerText et textContent lorsque vous manipulez votre code JavaScript.

Quel est le meilleur : InnerHTML contre InnerText contre TextContent ?

• InnerHTML : L’utilisation d’innerHTML vous permet de voir exactement ce qui se trouve dans le balisage HTML contenu dans une chaîne, y compris des éléments tels que l’espacement, les sauts de ligne et la mise en forme.
• Texte intérieur : Cela se rapproche du contenu textuel “rendu” d’un nœud et tient compte du style et du CSS. C’est plus efficace lorsque vous avez seulement besoin de voir ce qu’il y a dans l’élément sans la mise en forme.
• Contenu du texte : Cela récupère et définit le contenu de la balise en tant que texte brut. C’est plus efficace lorsque vous voulez voir ce qu’il y a dans un élément, ainsi que le style.

Commençons par un exemple de code HTML que j’utiliserai pour montrer le fonctionnement de chaque propriété.

<div id='blog test'>
   
This element is <strong>strong</strong> and     has some super fun <code>code</code>!
</div>

Comme vous pouvez le voir dans le code ci-dessus, nous incluons certains HTML faire le mot strong (gras) et faites le mot code apparaissent à espacement fixe. Le navigateur rendrait le code comme ceci :

Ce que l’extrait de code ci-dessus affiche dans le navigateur. | Capture d’écran : Annie Mester

Disons que nous créons une variable getValue et le mettre égal à notre div.

const getValue = document.getElementById('blog-test');

Maintenant, je vais vous expliquer ce que vous obtenez lorsque vous appelez innerHTML, innerText  et textContent sur ça getValue variable.

Qu’est-ce qu’InnerHTML en JavaScript ?

getValue.innerHTML

// =>   This element is <strong>strong</strong> and     has some super fun <code>code</code>!

Que renvoie InnerHTML ?

InnerHTML renvoie la chaîne à l’intérieur de notre div et le HTML (ou XML) contenus dans notre chaîne, y compris les espacements, les sauts de ligne et les irrégularités de formatage.

Quand utiliser InnerHTML

Tu devrais utiliser innerHTML quand vous voulez voir le balisage HTML et ce qu’il y a exactement dans votre élément, y compris les espacements, les sauts de ligne et les irrégularités de mise en forme.

Notes supplémentaires InnerHTML

Si le texte à l’intérieur de l’élément comprend les caractères &, <ou >, innerHTML renverra ces caractères sous forme d’entités HTML “&”, “<” et “>”.

En savoir plus sur JavaScriptComment choisir entre une boucle For et une boucle While

Qu’est-ce qu’InnerText en JavaScript ?

getValue.innerText

// =>   This element is strong and has some super fun code!

Ce que renvoie InnerText

InnerText renvoie la chaîne à l’intérieur de notre div. Il se rapproche du contenu textuel “rendu” d’un nœud et est conscient du style et CSS.

Pensez-y de cette façon : si un utilisateur a mis en surbrillance le contenu d’un élément sur son écran et l’a copié dans son presse-papiers, ce que vous obtenez avec innerText est exactement ce qu’il reviendrait.

Quand utiliser InnerText

Tu devrais utiliser innerText lorsque vous avez seulement besoin de voir ce qu’il y a dans l’élément sans le formatage.

Notes supplémentaires sur le texte intérieur

Lors de l’utilisation innerText il récupère et définit le contenu de la balise en tant que texte brut. Alors que lorsque vous utilisez innerHTMLil récupère et définit le même contenu au format HTML.

Qu’est-ce que TextContent en JavaScript ?

getValue.textContent

// =>   This element is strong and     has some super fun code!

Ce que TextContent renvoie

TextContent renvoie le contenu de tous les éléments du nœud, y compris les éléments de script et de style. Il est conscient du formatage comme l’espacement et les sauts de ligne et les renverra également.

Quand utiliser TextContent

Tu devrais utiliser textContent vous voulez voir ce qu’il y a dans l’élément, ainsi que tout style.

Notes supplémentaires sur le contenu du texte

Alors que innerText est très semblable à textContent, il existe des différences importantes entre eux. Mettre tout simplement, innerText est conscient de l’apparence rendue du texte tout en textContent n’est pas.

Améliorez vos compétences4 façons d’aider les développeurs de logiciels à développer leurs compétences

InnerHTML vs InnerText vs TextContent

Reprenons notre code d’origine.

<div id='blog test'>
   
This element is <strong>strong</strong> and     has some super fun <code>code</code>!

</div>

const getValue = document.getElementById('blog-test');

Voici ce que innerHTML, innerText et textContent revenir:

getValue.innerHTML

This element is <strong>strong</strong> and has    some super fun <code>code</code>!



getValue.innerText

This element is strong and has some super fun code!

getValue.textContent

This element is strong and     has some super fun code!

Comme vous pouvez le constater, il existe des différences essentielles entre les trois que nous avons abordées dans cet article.

De plus, vous devez également savoir qu’il existe différents implications pour la sécurité d’utiliser chaque propriété – en particulier innerHTML. Par exemple, bien que innerHTML est souvent utilisé pour insérer du texte ou un style, il peut également être utilisé pour insérer script balises qui exécutent JavaScript. Alors que HTML5 bloque tout script balise insérée via innerHTML de l’exécution, il existe d’autres façons d’exécuter JavaScript qui n’impliquent pas script.

Soyez donc vigilant lors de l’utilisation innerHTMLcar les attaques malveillantes pourraient cibler n’importe quel endroit de votre code qui utilise innerHTML pour définir ou mettre à jour un élément.

— to builtin.com