La manipulation du DOM implique souvent la création dynamique et l’ajout de nouveaux éléments au document, ou la suppression d’éléments existants en fonction des interactions utilisateur. Ici, nous examinerons comment créer et ajouter des éléments de manière dynamique.

Création de nouveaux éléments et ajout au DOM

JavaScript fournit des méthodes telles que createElement(), appendChild() et insertBefore() pour créer de nouveaux éléments et les ajouter au DOM.

CreateElement()

La méthode createElement() crée un nouvel élément HTML mais ne l’ajoute pas au DOM tant que vous ne le faites pas explicitement avec des méthodes comme appendChild() ou insertBefore().

// JS:
const newDiv = document.createElement('div'); // Creates a new `<div>` element
newDiv.textContent = 'This is a new div';

AppendChild()

La méthode appendChild() ajoute un nouvel élément enfant à la fin de la liste des enfants d’un élément parent. Elle est couramment utilisée pour ajouter des éléments en bas d’une section, d’une liste ou d’un conteneur.

InsertBefore()

La méthode insertBefore() insère un nouvel élément avant un élément enfant existant spécifié, permettant un placement plus précis au sein d’un parent.