Changer le texte d'une div à l'aide de Javascript

Pour modifier le texte affiché par un div, sélectionnez-le et affectez une chaîne à sa propriété textContent. La chaîne est traitée comme du texte, même si elle contient des caractères tels que < ou >.

Modifier le texte d’un div avec textContent

Dans une page web, placez le script après l’élément ou exécutez-le une fois le document chargé. Le sélecteur doit correspondre au div visé.

<div id="message">Welcome</div>
<script>
  const message = document.querySelector("#message");
  message.textContent = "Hello, world!";
</script>

L’exemple dans le navigateur ci-dessus met à jour la page réelle. Pour voir un petit exemple JavaScript de l’affectation à la propriété et de la valeur affichée, exécutez :

const div = { textContent: "" };
div.textContent = "Hello, world!";
console.log(div.textContent);

Hello, world!

Cet exemple exécutable utilise un objet simple pour illustrer l’affectation à la propriété et la sortie ; l’exemple HTML montre la mise à jour d’une page réelle. La sortie affiche « Hello, world! » : ce libellé reste en anglais dans le bloc immuable. Affecter une valeur à textContent remplace les nœuds enfants de l’élément par un nœud texte contenant la nouvelle chaîne. Utilisez cette propriété lorsque vous souhaitez afficher du texte brut, en particulier si la valeur provient d’un utilisateur ou d’une autre source non fiable.

Choisir entre textContent et innerHTML

Utilisez textContent pour du texte. innerHTML interprète la chaîne affectée comme du HTML et remplace les enfants de l’élément par les nœuds obtenus : choisissez cette propriété uniquement si vous souhaitez insérer du balisage. Insérer des données non fiables dans un contexte où le HTML est interprété peut créer un risque de script intersite ; l’interprétation du balisage ne signifie pas que chaque chaîne exécute automatiquement du code.

Par exemple, affecter la chaîne <strong>Hi</strong> à textContent affiche littéralement ces caractères. L’affecter à innerHTML crée un élément strong, et le navigateur affiche donc « Hi » en gras. Si vous avez besoin de balisage, séparez-le des valeurs non fiables et utilisez une méthode de rendu sûre et adaptée.

Utiliser d’autres méthodes JavaScript pour mettre à jour le texte

innerText récupère ou définit le texte rendu et peut tenir compte du style et de la mise en page. Utilisez-le lorsque ce comportement lié au texte rendu est important. Pour remplacer simplement du texte, textContent est généralement plus clair.

Vous pouvez créer un nœud texte avec createTextNode et remplacer les enfants existants par ce nœud lorsque vous construisez le contenu DOM étape par étape. Les littéraux de gabarit, délimités par des accents graves, facilitent la composition de chaînes dynamiques ; affecter la chaîne obtenue à textContent la traite toujours comme du texte. Si votre page charge déjà jQuery, $("#message").text("Hello, world!") définit le texte de l’élément sélectionné. Sans jQuery, utilisez les API DOM du navigateur présentées ci-dessus.

Utiliser le contenu généré par CSS pour du texte décoratif

Les pseudo-éléments CSS ::before et ::after peuvent ajouter une décoration visuelle, par exemple une petite étiquette à côté d’un élément. Le contenu généré ne met pas à jour le texte DOM du div avec JavaScript ; il ne convient pas aux informations essentielles ni au contenu interactif. Certains éléments remplacés, dont img, n’affichent pas le contenu généré comme les éléments ordinaires. Utilisez textContent si le texte doit faire partie du contenu réel de la page.