HTMLElement : propriété innerText
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis mars 2016.
La propriété innerText de l'interface HTMLElement représente le contenu textuel affiché d'un nœud et de ses descendants.
En lecture, elle correspond approximativement au texte que l'utilisateur·ice obtiendrait en sélectionnant le contenu de l'élément avec le curseur puis en le copiant dans le presse-papiers.
En écriture, elle remplace les enfants de l'élément par la valeur donnée, en convertissant les sauts de ligne en éléments HTML <br>.
Note :
Il est facile de confondre innerText avec Node.textContent, mais il existe des différences importantes entre les deux.
En résumé, innerText tient compte de l'apparence affichée du texte, alors que textContent non.
Valeur
Une chaîne de caractères représentant le contenu textuel affiché d'un élément.
Si l'élément lui-même n'est pas affiché (angl.) (par exemple, s'il est détaché du document ou caché à la vue), la valeur retournée est la même que celle de la propriété Node.textContent.
Attention :
Définir innerText sur un nœud supprime tous les enfants du nœud et les remplace par un seul nœud texte contenant la chaîne de caractères fournie.
Exemples
Cet exemple compare innerText avec Node.textContent.
Remarquez que innerText prend en compte des éléments comme <br> et ignore les éléments cachés.
HTML
<h3>Élément source :</h3>
<p id="source">
<style>
#source {
color: red;
}
#text {
text-transform: uppercase;
}
</style>
<span id="text">
Regardez<br />
comment ce texte<br />
est interprété ci-dessous.
</span>
<span style="display:none">TEXTE CACHÉ</span>
</p>
<h3>Résultat de textContent :</h3>
<textarea id="textContentOutput" rows="18" cols="40" readonly>…</textarea>
<h3>Résultat de innerText :</h3>
<textarea id="innerTextOutput" rows="6" cols="40" readonly>…</textarea>
JavaScript
const source = document.getElementById("source");
const textContentOutput = document.getElementById("textContentOutput");
const innerTextOutput = document.getElementById("innerTextOutput");
textContentOutput.value = source.textContent;
innerTextOutput.value = source.innerText;
Résultat
Spécifications
| Specification |
|---|
| HTML # the-innertext-idl-attribute |
Compatibilité des navigateurs
Voir aussi
- La propriété
HTMLScriptElement.innerText - La propriété
HTMLElement.outerText - La propriété
Element.innerHTML