JavaScript Academy · Leçon

Modifier le texte et le contenu HTML

Mettez à jour le contenu avec textContent et innerHTML.

Modifier le texte et le contenu HTML est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Lire et écrire du texte

Pour modifier ce qu’un élément affiche, vous pouvez définir son texte ou son HTML. Le bon choix dépend de votre besoin de balisage et du degré de confiance que vous accordez aux données.

textContent

textContent récupère ou définit le texte brut d’un élément. Sa définition remplace tous les enfants par un seul nœud de texte et traite l’entrée comme du texte brut.

const el = document.querySelector("#status");
el.textContent = "Saved!";

textContent échappe le balisage

Comme il s’agit de texte brut, tout code HTML contenu dans la chaîne est affiché littéralement et non interprété. Cela protège contre l’injection.

el.textContent = "<b>hi</b>";
// displays the literal characters <b>hi</b>

innerHTML

innerHTML récupère ou définit le balisage HTML situé à l’intérieur d’un élément. Sa définition interprète la chaîne comme du HTML et crée de véritables nœuds.

const box = document.querySelector("#box");
box.innerHTML = "<strong>Done</strong>";

innerHTML remplace tout

Affecter une valeur à innerHTML supprime les enfants existants et reconstruit le sous-arbre à partir du nouveau balisage.

box.innerHTML = "<ul><li>One</li><li>Two</li></ul>";

Le danger du XSS

Ne placez jamais de données saisies par un utilisateur non fiable dans innerHTML. Une chaîne malveillante peut injecter des scripts ou des gestionnaires d’événements : il s’agit d’une vulnérabilité appelée XSS.

const userInput = getInput();
// DANGEROUS:
// box.innerHTML = userInput;
// SAFE:
box.textContent = userInput;

innerText

innerText ressemble à textContent, mais tient compte du style : il reflète le texte rendu et ignore les éléments masqués.

console.log(el.innerText); // visible text only

textContent ou innerText

textContent renvoie tout le texte, y compris le contenu masqué, et est plus rapide, car il ne déclenche pas de mise en page. innerText tient compte de la mise en page et est plus lent.

el.textContent; // all text, even display:none
el.innerText;   // only what is visually rendered

Ajouter du texte en toute sécurité

Pour ajouter du texte sans effacer les nœuds existants, créez un nœud de texte ou utilisez insertAdjacentText au lieu de remplacer textContent.

el.append(document.createTextNode(" extra"));
el.insertAdjacentText("beforeend", " more");

Insérer du HTML sans tout réinterpréter

insertAdjacentHTML ajoute du balisage à un emplacement donné sans réinterpréter tout l’élément, ce qui est plus efficace que de reconstruire innerHTML.

box.insertAdjacentHTML("beforeend", "<li>New item</li>");

Choisir la bonne propriété

Utilisez textContent pour du texte brut, ce qui constitue le choix sûr par défaut, innerHTML uniquement avec du balisage fiable, et innerText lorsque vous avez spécifiquement besoin du texte rendu et visible.

Vérification rapide

Choisissez l’approche sûre.

Récapitulatif

textContent définit un texte brut échappé et constitue le choix sûr par défaut. innerHTML interprète le balisage, mais présente un risque de XSS avec des données saisies non fiables. innerText ne reflète que le texte visible et rendu. Pour ajouter du contenu, préférez insertAdjacentHTML/insertAdjacentText au remplacement de l’élément entier.

Questions Fréquemment Posées

La leçon « Modifier le texte et le contenu HTML » est-elle gratuite ?

Oui — le texte complet de « Modifier le texte et le contenu HTML » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Modifier le texte et le contenu HTML » ?

Mettez à jour le contenu avec textContent et innerHTML. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Modifier le texte et le contenu HTML » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy