Quelles sont les différences entre « innerHTML », « innerText », « textContent » et « value » en JavaScript ?

Explorer les nuances de innerHTML, innerText et value

Lorsque vous travaillez avec des éléments en JavaScript, il est essentiel de comprendre les différences entre innerHTML, innerText et propriétés de valeur. Chacun répond à un objectif spécifique et possède ses propres caractéristiques.

innerHTML représente le contenu HTML d'un élément. Il inclut tous les éléments enfants, le texte et tout balisage HTML. Il nous permet de modifier dynamiquement la structure du DOM en insérant, remplaçant ou supprimant du code HTML. Par exemple :

document.getElementById('element').innerHTML = '<p>New content</p>';

innerText récupère ou définit le contenu du texte entre les balises d'ouverture et de fermeture de l'élément. Il tient compte du style et omet les balises HTML ou les espaces. Cela signifie qu'il présente une version « rendue » du texte de l'élément. Par exemple :

console.log(document.getElementById('element').innerText); // "Rendered text without HTML tags"

textContent stocke le contenu textuel d'un élément et de tous ses descendants. Cependant, il ignore toute syntaxe ou style HTML et fournit l'intégralité du contenu du texte sous forme de chaîne. C'est particulièrement utile lorsque vous souhaitez obtenir le contenu complet du texte, y compris le texte masqué ou les espaces. Par exemple :

console.log(document.getElementById('element').textContent); // "Complete text content, including whitespace"

valeur varie en fonction du type d'élément. Pour les éléments d'entrée, il représente l'entrée utilisateur actuelle. Pour les éléments sélectionnés, il renvoie la valeur de l'option sélectionnée. Pour les éléments qui ne définissent pas de propriété de valeur, il renvoie généralement null. Par exemple :

console.log(document.getElementById('input').value); // "User-entered value"

Pour illustrer les différences entre ces propriétés, considérons l'extrait HTML suivant :

<div>
<p>Exécuter le code JavaScript suivant :</p>
<pre class="brush:php;toolbar:false">console.log(document.getElementById('test').innerHTML);
console.log(document.getElementById('test').innerText);
console.log(document.getElementById('test').textContent);

produira le résultat suivant :

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