logo oujood
🔍

JavaScript DOM — La méthode createTextNode()

Maîtrisez la création de nœuds de texte avec createTextNode() : syntaxe, paramètres et exemples pratiques pour manipuler le DOM en JavaScript.

OUJOOD.COM

Qu'est-ce que la méthode createTextNode() ?

JavaScript — Tutoriel DOM pour débutants

Quand vous construisez une page web dynamique, vous avez souvent besoin d'ajouter du texte sans passer par innerHTML. C'est exactement là qu'intervient createTextNode(). Cette méthode du DOM JavaScript vous permet de créer un nœud de type texte pur, indépendamment de tout élément HTML, puis de l'insérer précisément où vous le souhaitez dans la page.

Contrairement à innerHTML qui interprète et exécute le HTML qu'on lui donne — ce qui peut ouvrir des failles de sécurité (type XSS) —, createTextNode() traite tout comme du texte brut. Si vous lui passez <script>alert('pirate')</script>, il l'affichera tel quel à l'écran, sans l'exécuter. C'est pourquoi on la préfère dans les contextes où la sécurité compte.

En 2026, cette méthode reste pleinement valide et est supportée par tous les navigateurs modernes sans aucun polyfill nécessaire : Chrome, Firefox, Safari, Edge et leurs versions mobiles.

Syntaxe et paramètres de createTextNode()

Avant de voir des exemples, prenons le temps de comprendre comment cette méthode s'utilise. La syntaxe est volontairement simple :

document.createTextNode(texte)

Elle n'accepte qu'un seul paramètre :

Paramètre Type Description
texte String Obligatoire. La chaîne de caractères qui constituera le contenu du nœud de texte créé.

La méthode retourne un objet Text, c'est-à-dire un nœud DOM de type texte. Ce nœud existe en mémoire mais n'est pas encore visible dans la page : vous devez l'attacher à un élément existant avec appendChild() ou insertBefore().

Exemple 1 — Ajouter du texte directement dans le body

Voici le cas le plus simple : on crée un nœud de texte, puis on l'ajoute directement à la fin du <body>. C'est l'équivalent d'écrire du texte brut dans la page, mais de façon programmatique.

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>createTextNode — Exemple 1</title>
</head>
<body>
  <p id="intro">Cliquez sur le bouton pour ajouter du texte.</p>
  <button onclick="ajouterTexte()">Ajouter le texte</button>

  <script>
  function ajouterTexte() {
    // On crée un nœud de texte — pas un élément HTML, juste du texte pur
    var monTexte = document.createTextNode(" Bonjour, je suis un nœud de texte !");

    // On l'attache au body : il apparaît à la fin de la page
    document.body.appendChild(monTexte);
  }
  </script>
</body>
</html>

Vous remarquerez que le texte s'affiche sans aucune balise autour de lui. Il n'est pas dans un paragraphe ni dans un <span> : c'est du texte "flottant" dans le body. Dans la pratique, on préfère toujours l'associer à un élément structuré, comme dans l'exemple suivant.

Comment fonctionne un élément HTML dans le DOM ?

Pour bien comprendre la suite, il faut savoir qu'un élément HTML est en réalité composé de deux nœuds distincts dans l'arbre DOM :

Un nœud élément (par exemple <p>) qui représente la balise elle-même, et un nœud texte qui contient le contenu textuel à l'intérieur. Ces deux nœuds sont liés : le texte est un enfant de l'élément.

Quand vous écrivez <p>Bonjour</p> en HTML, le navigateur crée automatiquement ces deux nœuds. En JavaScript, si vous voulez faire la même chose dynamiquement, vous devez les créer vous-même, l'un après l'autre.

Exemple 2 — Créer un paragraphe complet avec createElement et createTextNode

Cet exemple illustre la combinaison classique : on crée d'abord l'élément <p> avec createElement(), puis on crée son contenu textuel avec createTextNode(), et enfin on les assemble.

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>createTextNode — Exemple 2</title>
</head>
<body>
  <p>Cliquez pour générer un nouveau paragraphe.</p>
  <button onclick="creerParagraphe()">Créer le paragraphe</button>

  <script>
  function creerParagraphe() {
    // Étape 1 : on crée l'élément <p> (la "boîte")
    var paragraphe = document.createElement("p");

    // Étape 2 : on crée le texte qui ira à l'intérieur (le "contenu")
    var contenu = document.createTextNode("Ce paragraphe a été créé dynamiquement en JavaScript !");

    // Étape 3 : on place le texte dans le paragraphe
    paragraphe.appendChild(contenu);

    // Étape 4 : on ajoute le paragraphe complet dans la page
    document.body.appendChild(paragraphe);
  }
  </script>
</body>
</html>

Exemple 3 — Insérer du texte dans un élément ciblé existant

Dans la majorité des projets réels, vous ne voulez pas ajouter du contenu n'importe où dans le body. Vous ciblez un élément précis — une <div>, un <section> — et vous y injectez le texte. Voici comment faire avec getElementById() combiné à createTextNode().

  📋 Copier le code

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>createTextNode — Exemple 3</title>
</head>
<body>
  <div id="zone-affichage">
    <p>Cette zone va recevoir du contenu dynamique.</p>
  </div>
  <button onclick="insererMessage()">Insérer un message</button>

  <script>
  function insererMessage() {
    // On récupère la div cible par son identifiant
    var zone = document.getElementById("zone-affichage");

    // On crée un nouveau paragraphe et son texte
    var nouvParagraphe = document.createElement("p");
    var texte = document.createTextNode("Message ajouté sans innerHTML — méthode sécurisée ✅");

    // On assemble et on insère dans la zone ciblée
    nouvParagraphe.appendChild(texte);
    zone.appendChild(nouvParagraphe);
  }
  </script>
</body>
</html>

Cette approche est particulièrement recommandée quand le texte inséré peut provenir d'une source externe (formulaire utilisateur, API…), car createTextNode() neutralise automatiquement tout code HTML ou JavaScript qui pourrait s'y glisser.

sommaire

Par carabde | Mis à jour le 29 mars 2026