web-dev-qa-db-fra.com

Différence entre innerText et innerHTML

Quelle est la différence entre innerHTML, innerText et childNodes[].value en JavaScript?

javascriptdom
225
user2819851

Contrairement à innerText, cependant, innerHTML vous permet de travailler avec du texte enrichi HTML sans coder ni décoder automatiquement le texte. En d'autres termes, innerText récupère et définit le contenu de la balise en tant que texte brut, alors que innerHTML récupère et définit le contenu au format HTML.

126
alejo802

Les exemples ci-dessous font référence à l'extrait de code HTML suivant:

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

Le noeud sera référencé par le code JavaScript suivant:

var x = document.getElementById('test');


element.innerHTML

Définit ou obtient la syntaxe HTML décrivant les descendants de l'élément

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

Cela fait partie de la spécification d'analyse de DOM et de sérialisation du W3C . Notez que c'est une propriété des objets Element.


node.innerText

Définit ou obtient le texte entre les balises de début et de fin de l'objet

x.innerText
// => "Warning: This element contains code and strong language."
  • innerText a été introduit par Microsoft et n'a pas été supporté par Firefox pendant un certain temps. En août 2016, innerText a été adopté par le WHATWG et a été ajouté à Firefox dans la v45.
  • innerText vous donne une représentation sensible au style du texte qui tente de correspondre à ce que le navigateur affiche, ce qui signifie:
    • innerText applique les règles text-transform et white-space
    • innerText réduit l'espace entre les lignes et ajoute des sauts de ligne entre les éléments
    • innerText ne retournera pas de texte pour les éléments invisibles
  • innerText retournera textContent pour les éléments qui ne sont jamais restitués comme <style /> et `
  • Propriété de Node elements


node.textContent

Obtient ou définit le contenu textuel d'un nœud et de ses descendants.

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

Bien qu'il s'agisse d'un standard W3C , il n'est pas pris en charge par IE <9.

  • Ne connaît pas le style et retournera donc le contenu caché par CSS
  • Ne déclenche pas de refusion (donc plus performant)
  • Propriété de Node elements


node.value

Celui-ci dépend de l'élément que vous avez ciblé. Dans l'exemple ci-dessus, x renvoie un objet HTMLDivElement , pour lequel aucune propriété value n'a été définie.

x.value // => null

Les balises d'entrée (<input />), par exemple, do définissent une propriété value , qui fait référence à la "valeur actuelle du contrôle".

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

À partir de la documentation :

Remarque: pour certains types d'entrée, la valeur renvoyée peut ne pas correspondre à la valeur entrée par l'utilisateur. Par exemple, si l'utilisateur entre une valeur non numérique dans un <input type="number">, la valeur renvoyée peut être une chaîne vide à la place.


Exemple de script

Voici un exemple montrant la sortie du code HTML présenté ci-dessus:

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; 
}

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  log('[' + property + ']'  +  value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}
<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>
239
fny

InnerText property html-code le contenu, en tournant <p> en &lt;p&gt;, etc. Si vous souhaitez insérer des balises HTML, vous devez utiliser InnerHTML.

19
guymid

En mots simples:

  1. innerText affiche la valeur telle quelle et ignore tout formatage HTML pouvant être inclus.
  2. innerHTML affichera la valeur et appliquera le formatage HTML.
8
Balkishan
var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);

Pour l'affiner davantage et récupérer la valeur Alec par exemple, utilisez un autre fichier .childNodes [1].

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);
3
kaushik0033

En termes de MutationObservers, le réglage de innerHTML génère une mutation childList due au fait que les navigateurs ont supprimé le nœud puis ajouté un nouveau nœud avec la valeur innerHTML.

Si vous définissez innerText, une mutation characterData est générée.

2
Nikos

InnerText ne renverra que la valeur textuelle de la page avec chaque élément d'une nouvelle ligne en texte brut, tandis que innerHTML renverra le contenu HTML de tout ce qui se trouve dans la balise body, et childNodes retournera une liste de nœuds, comme son nom l’indique.

1
scrblnrd3

La propriété innerText renvoie la valeur texte actuel d'un élément html, tandis que innerHTML renvoie le HTML content. Exemple ci-dessous:

var element = document.getElementById('hello');
element.innerText = '<strong> hello world </strong>';
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);

console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);
element.innerHTML = '<strong> hello world </strong>';
console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText);
console.log(element.innerHTML);
<p id="hello"> Hello world 
</p>
0
NickAth