Comment modifier du texte avec JavaScript

Pour modifier le texte d’une page existante, commencez par sélectionner le bon élément du DOM. Utilisez getElementById() si l’élément possède un id connu et unique : cette méthode recherche un ID, pas un nom de classe. Les ID HTML doivent être uniques dans un document. La méthode renvoie un seul élément — ou null si aucune correspondance n’est trouvée — au lieu de modifier tous les éléments qui partageraient le même ID.

Une fois l’élément obtenu, choisissez si le nouveau texte doit remplacer le contenu actuel ou s’ajouter à la suite. textContent est une propriété qui permet de lire ou de définir du texte. createTextNode() crée un nœud de texte, et appendChild() rattache ce nœud à un élément.

Modifier le texte d’un élément avec textContent

Définissez textContent lorsque l’élément doit afficher une nouvelle valeur textuelle à la place de son contenu actuel. L’affectation remplace le contenu enfant de l’élément par du texte ; elle n’interprète pas la chaîne fournie comme du HTML. Si la chaîne contient des caractères comme < et >, ils restent du texte et ne deviennent pas du balisage.

Cet exemple complet comprend un petit substitut d’élément afin que le JavaScript puisse fonctionner de manière autonome. Dans une page Web, sélectionnez l’élément existant avec document.getElementById("message"), puis appliquez-lui la même affectation.

Exécutez cet exemple : les chaînes visibles dans le bloc, comme "Before" et "Hello, JavaScript!", restent en anglais.

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }
}

const elements = { message: new TextElement("Before") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
};

const message = document.getElementById("message");
if (message) {
  message.textContent = "Hello, JavaScript!";
}
console.log(message.textContent);

La vérification gère l’absence de l’élément : si aucun ID ne correspond, getElementById() renvoie null, et l’affectation est donc ignorée. Dans une application, vous pouvez traiter explicitement ce cas, par exemple en affichant une erreur ou en vérifiant que le script s’exécute après l’ajout de l’élément au document.

Ajouter du texte avec createTextNode() et appendChild()

Pour conserver le texte existant et en ajouter à la suite, créez un nœud de texte et ajoutez-le à l’élément sélectionné. Cette opération ne remplace pas les enfants actuels de l’élément. L’exemple autonome suivant illustre les opérations du DOM concernées ; dans un navigateur, utilisez document.createTextNode() et l’élément renvoyé par document.getElementById(). Les chaînes visibles dans le bloc, comme "Hello, " et "JavaScript!", restent en anglais.

class TextElement {
  constructor(textContent) {
    this.textContent = textContent;
  }

  appendChild(node) {
    this.textContent += node.textContent;
    return node;
  }
}

const elements = { message: new TextElement("Hello, ") };
const document = {
  getElementById(id) {
    return elements[id] ?? null;
  },
  createTextNode(text) {
    return { textContent: text };
  },
};

const message = document.getElementById("message");
if (message) {
  const addedText = document.createTextNode("JavaScript!");
  message.appendChild(addedText);
}
console.log(message.textContent);

Le nœud ajouté place son texte après celui déjà présent dans l’élément. Cette méthode convient pour ajouter une courte étiquette, un message d’état ou un autre texte tout en préservant le contenu existant. Si le script risque de s’exécuter avant la création de l’élément cible, attendez que la page l’ait créé ou gérez le résultat null avant d’ajouter le nœud.

Choisir entre le remplacement et l’ajout de texte

Utilisez textContent = value lorsque l’élément doit afficher uniquement le nouveau texte. Utilisez createTextNode(value) avec appendChild() lorsque le contenu existant doit être conservé et que le nouveau texte doit venir après. Ce sont deux opérations différentes : affecter la propriété remplace le contenu enfant, tandis qu’ajouter un nœud crée un enfant supplémentaire.

Dans les deux cas, la valeur fournie est traitée comme du texte et non analysée comme du HTML. Pour un texte fourni par l’utilisateur, ces API évitent que cette valeur soit convertie en balisage ; elles ne remplacent pas les autres pratiques de sécurité dont votre application peut avoir besoin. Utilisez getElementById() avec l’ID de la cible, vérifiez qu’une correspondance existe si le moment d’exécution du script ou un balisage conditionnel peut rendre l’élément absent, puis choisissez entre remplacement et ajout selon que le texte précédent doit être conservé.