Il y a quelques semaines, je travaillais sur quelque chose et j'ai eu l'un de ces « Aha ! » des moments où quelque chose avait un sens si profond que je me suis dit que je devrais l'explorer et écrire à ce sujet.

Malheureusement, je ne me souviens pas sur quoi je travaillais ou sur quoi ce 'Aha!' moment était exactement. Alors, je vais m'y plonger et voir si je peux le redécouvrir.

texteinterne

En JavaScript vanille, innerText ne saisit que le texte rendu d'un élément HTML. Essentiellement, le texte qui est visible dans le navigateur est ce que innerText saisit.

HTML

<p id=“example”>This is an <span> example </span>.</p>

JavaScript

var x = document.getElementById(“example”).innerText;

Quelques éléments à garder à l'esprit :

• si les éléments sont masqués avec CSS (en utilisant quelque chose comme les propriétés 'affichage' ou 'visibilité'), innerText ne peut pas y accéder
• innerText ne renverra PAS le contenu des éléments <script> ou <style>

Cela obtiendra ou définira en fait le contenu interne d'un élément HTML.

Lorsqu'il récupère le contenu interne, il inclura également les balises d'espacement et d'élément interne telles que <li> ou <span>, etc.

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).innerHTML;

Pour modifier le contenu d'un élément HTML :

document.getElementById(“example”).innerHTML = “And <strong> NOW </strong> the contents have been changed!”;

***Comme innerHTML peut être utilisé pour modifier le contenu d'une page, il est possible que des balises <script> dangereuses et d'autres attaques JavaScript soient exécutées.***

***Par conséquent, il n'est pas recommandé d'utiliser innerHTML.***

Au lieu de cela, essayez d'utiliser textContent.

texteContenu

Cela renverra le contenu du texte avec un espacement (similaire à innerHTML), mais sans aucune balise d'élément interne.

Pour récupérer le textContent :

HTML

<p id=“example”>This is an <span> example </span>.</p>

var x = document.getElementById(“example”).textContent;

Pour définir le textContent, faites-le comme avec l'exemple innerHTML ci-dessus.

document.getElementById(“example”).textContent = “And <strong> NOW </strong> the contents have been changed!”;

• renverra le contenu textuel de tous les éléments, y compris <script> et <style>
• renverra le texte des éléments cachés avec CSS