Modifier le document | Tutoriel JavaScript W3docs

JavaScript vous permet de modifier une page après son chargement : ajouter de nouveaux éléments, les déplacer, mettre à jour du texte, changer des attributs et supprimer ce dont l'utilisateur n'a plus besoin. C'est le fondement de toute interface dynamique — de l'affichage d'un message de validation au rendu d'une liste complète de résultats de recherche.

Cette page présente la boîte à outils pratique pour modifier le DOM : créer et insérer des nœuds, la différence entre textContent et innerHTML, l'insertion rapide de HTML avec insertAdjacentHTML, supprimer et remplacer des nœuds, et utiliser un DocumentFragment pour maintenir des mises à jour rapides. Pour trouver d'abord les éléments à modifier, consultez Rechercher : getElement* et querySelector*. Pour une vue d'ensemble de la façon dont la page est structurée en arbre de nœuds, consultez Comprendre les nœuds DOM.

Créer de nouveaux nœuds

Avant de pouvoir insérer quelque chose dans la page, vous devez le créer. Il existe deux blocs de construction : les nœuds d'éléments (<div>, <li>, …) et les nœuds texte (texte brut).

Créer des éléments

Les nouveaux éléments sont créés avec la méthode document.createElement(tag). L'élément n'existe qu'en mémoire jusqu'à ce que vous l'insériez dans le document — jusque-là, l'utilisateur ne voit rien. Voici comment créer un div et l'ajouter à la page :

<body></body>
<script>
  let div = document.createElement('div');
  div.innerHTML = "Hello, world!";
  document.body.appendChild(div);
</script>

Essayez vous-même »

L'élément n'apparaît qu'une fois que appendChild (ou une autre méthode d'insertion) l'attache à un nœud déjà présent dans le document.

Créer des nœuds texte

Pour ajouter du texte brut, utilisez document.createTextNode(text). Contrairement à innerHTML, un nœud texte traite son contenu littéralement — <b> reste les caractères <b> au lieu de devenir une balise gras. Les nœuds texte sont donc le choix sûr lorsque le texte provient d'un utilisateur ou d'une source non fiable :

<body>
  <div id="container"></div>
</body>
<script>
  const div = document.getElementById("container");
  let textNode = document.createTextNode('Here is some text');
  div.appendChild(textNode);
</script>

Essayez vous-même »

Insérer des nœuds

Une fois qu'un nœud existe, vous devez le placer quelque part. La méthode classique est parent.appendChild(node), qui ajoute le nœud en tant que dernier enfant. Les navigateurs modernes proposent également une famille de méthodes plus flexibles qui acceptent des nœuds ou des chaînes de caractères :

Méthode	Où elle insère
`node.append(...)`	À la fin, à l'intérieur de `node`
`node.prepend(...)`	Au début, à l'intérieur de `node`
`node.before(...)`	Juste avant `node`
`node.after(...)`	Juste après `node`
`node.replaceWith(...)`	Remplace entièrement `node`

Ici, append et prepend ajoutent des éléments de liste aux deux extrémités d'un <ul> :

<body>
  <ul id="list">
    <li>middle</li>
  </ul>
</body>
<script>
  const list = document.getElementById("list");

  const first = document.createElement("li");
  first.textContent = "first";
  list.prepend(first);

  const last = document.createElement("li");
  last.textContent = "last";
  list.append(last);
</script>

insertAdjacentHTML

Lorsque vous souhaitez insérer une chaîne HTML relativement à un élément — sans perturber le contenu existant — element.insertAdjacentHTML(position, html) est l'outil adapté. L'argument position est l'un des quatre mots-clés suivants :

"beforebegin" — avant l'élément lui-même
"afterbegin" — à l'intérieur, avant le premier enfant
"beforeend" — à l'intérieur, après le dernier enfant
"afterend" — après l'élément lui-même

<body>
  <div id="box">existing content</div>
</body>
<script>
  const box = document.getElementById("box");
  box.insertAdjacentHTML("beforeend", "<p>added inside, at the end</p>");
  box.insertAdjacentHTML("afterend", "<p>added after the box</p>");
</script>

Comme insertAdjacentHTML analyse une chaîne HTML, ne lui passez jamais d'entrée non fiable — le même risque XSS s'applique qu'avec innerHTML. Il existe des méthodes sœurs insertAdjacentText et insertAdjacentElement pour insérer du texte brut ou un nœud existant aux mêmes positions.

textContent vs innerHTML

Les deux propriétés définissent le contenu d'un élément, mais se comportent très différemment :

innerHTML analyse la chaîne en tant que HTML. el.innerHTML = "<b>Hi</b>" produit un nœud en gras. L'assigner remplace tous les enfants existants.
textContent traite la chaîne comme du texte brut. el.textContent = "<b>Hi</b>" affiche les caractères littéraux <b>Hi</b>.

Préférez textContent chaque fois que vous insérez du texte — c'est plus rapide et immunisé contre l'injection HTML/script. Utilisez innerHTML uniquement lorsque vous avez réellement besoin de balisage et que la source est de confiance.

<body>
  <div id="asHtml"></div>
  <div id="asText"></div>
</body>
<script>
  const input = "<b>3 < 5</b>";
  document.getElementById("asHtml").innerHTML = input;   // renders bold text
  document.getElementById("asText").textContent = input; // shows the literal markup
</script>

Modifier des éléments

Modifier des attributs

Pour modifier un attribut d'un élément, vous pouvez utiliser element.setAttribute(name, value). Cette méthode vous permet de définir la valeur d'un attribut sur l'élément spécifié.

<body>
  <div id="firstID"></div>
  <div>new id is: <span id="result"></span></div>
</body>
<script>
  const div = document.getElementById("firstID");
  const result = document.getElementById("result");
  
  div.setAttribute("id", "newDiv");
  result.innerHTML = div.id;
</script>

Essayez vous-même »

Pour un regard plus approfondi sur la distinction entre les attributs HTML et les propriétés DOM (et quand utiliser setAttribute plutôt qu'un accès direct à la propriété comme el.id = "..."), consultez Attributs et propriétés.

Manipulations avancées

Cloner des éléments

Vous pouvez créer une copie d'un élément à l'aide de la méthode element.cloneNode(deep). En passant deep à true, l'élément est cloné avec tous ses descendants.

<body>
  <div id="mydiv">one div here, or two divs if cloned! <span>And here is a span inside the div!</span></div>
</body>
<script>
  const div = document.getElementById("mydiv");
  const clone = div.cloneNode(true);
  document.body.appendChild(clone);
</script>

Essayez vous-même »

Remplacer des éléments

Pour remplacer un nœud par un autre, appelez element.replaceWith(newNode). L'ancien nœud quitte le document et le nouveau prend sa place :

<body>
  <p id="old">I will be replaced.</p>
</body>
<script>
  const old = document.getElementById("old");
  const fresh = document.createElement("p");
  fresh.textContent = "I am the replacement.";
  old.replaceWith(fresh);
</script>

Supprimer des éléments

Pour supprimer un élément du DOM, vous pouvez utiliser element.remove().

<body>
  <div>It's the only thing you see, as the next div is removed!</div>
  <div id="mydiv">you don't see me if I'm removed!</div>
</body>
<script>
  const div = document.getElementById("mydiv");
  div.remove();
</script>

Essayez vous-même »

Regrouper les mises à jour avec un DocumentFragment

Chaque fois que vous insérez un nœud dans le document actif, le navigateur peut recalculer la mise en page. Insérer de nombreux nœuds dans une boucle, un par un, peut donc être lent. Un DocumentFragment est un conteneur léger hors écran : vous assemblez tous vos nœuds à l'intérieur, puis vous insérez le fragment une seule fois. Seuls ses enfants se retrouvent dans le DOM — le fragment lui-même disparaît.

<body>
  <ul id="list"></ul>
</body>
<script>
  const list = document.getElementById("list");
  const fragment = document.createDocumentFragment();

  for (let i = 1; i <= 5; i++) {
    const li = document.createElement("li");
    li.textContent = "Item " + i;
    fragment.appendChild(li);
  }

  // One single insertion into the live document
  list.appendChild(fragment);
</script>

Pour d'autres moyens de maintenir des mises à jour DOM efficaces, consultez Optimisation des performances DOM. Si votre balisage est réutilisable, l'élément <template> est une autre façon rapide de cloner une structure prête à l'emploi.

Exemple pratique : créer une liste de tâches

Appliquons ces concepts pour créer une liste de tâches simple avec JavaScript :

<body></body>
<script>
// Creating the list container
let list = document.createElement('ul');
document.body.appendChild(list);

// Adding items to the list
function addItem(text) {
    let item = document.createElement('li');
    item.textContent = text;
    list.appendChild(item);
}

addItem('Learn JavaScript');
addItem('Build a to-do list');
</script>

Essayez vous-même »

Conclusion

Modifier le document est au cœur de toute interface dynamique : créez des nœuds avec createElement/createTextNode, placez-les avec append/prepend/before/after ou insertAdjacentHTML, choisissez textContent pour du texte sûr et innerHTML uniquement pour du balisage de confiance, et utilisez un DocumentFragment pour accélérer les mises à jour en masse. Utilisez replaceWith et remove pour échanger ou supprimer des nœuds.

Pour aller plus loin, explorez Manipulation du DOM pour une vue d'ensemble plus large, Parcourir le DOM pour naviguer entre les nœuds liés, et Propriétés des nœuds : type, balise et contenu pour comprendre ce que contient chaque nœud.

Exercice

Pratique

Quelle méthode peut être utilisée en JavaScript pour modifier un attribut d'un élément ?

`element.setAttribute('id', 'newDiv')``element.modifyAttribute('id', 'newDiv')``element.changeAttribute('id', 'newDiv')``element.updateAttribute('id', 'newDiv')`