Retour au cours

Changer le contenu du texte : textContent vs innerHTML

JavaScript : Le cours complet pour débutant, de « Zéro à Héros »

81. Changer le contenu du texte

Une fois qu'un élément est sélectionné, nous pouvons modifier son contenu via deux propriétés principales.

1. textContent (Texte uniquement)

Définit ou renvoie le contenu textuel de l'élément et de tous ses descendants. Il échappe automatiquement toutes les balises HTML, les traitant comme du texte brut.

javascript const output = document.getElementById('output');

output.textContent = 'Ceci est le nouveau texte.';

// L'utilisation de textContent est plus sûre, car le HTML est rendu sous forme de texte : output.textContent = '

Danger !

'; // Le navigateur affichera littéralement la chaîne '

Danger !

'

2. innerHTML (Texte et balisage HTML)

Définit ou renvoie le contenu HTML (balisage) à l'intérieur d'un élément. C'est nécessaire si vous avez besoin d'injecter dynamiquement de nouveaux éléments.

javascript const list = document.querySelector('.list');

// Injection d'un élément

  • list.innerHTML = '
  • Premier élément
  • Deuxième élément
    • ';

    // Prudence : Risque de sécurité (XSS) list.innerHTML = someUserInput; // Si la saisie contient des scripts malveillants, ils s'exécuteront.

    Règle d'or : Utilisez textContent chaque fois que vous ne manipulez que du texte. N'utilisez innerHTML que lorsque vous devez injecter du HTML structurel, et uniquement avec des données de confiance.