Éléments DOM JavaScript HTML (nœuds)
Ajout et suppression de nœuds (éléments HTML)
Création de nouveaux éléments HTML (nœuds)
Pour ajouter un nouvel élément au DOM HTML, vous devez d'abord créer l'élément (nœud d'élément), puis l'ajouter à un élément existant.
Exemple
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
Exemple expliqué
Ce code crée un nouvel <p>élément :
const para = document.createElement("p");
Pour ajouter du texte à l' <p>élément, vous devez d'abord créer un nœud de texte. Ce code crée un nœud de texte :
const node = document.createTextNode("This is a new paragraph.");
Ensuite, vous devez ajouter le nœud de texte à l' <p>élément :
para.appendChild(node);
Enfin, vous devez ajouter le nouvel élément à un élément existant.
Ce code trouve un élément existant :
const element = document.getElementById("div1");
Ce code ajoute le nouvel élément à l'élément existant :
element.appendChild(para);
Création de nouveaux éléments HTML - insertBefore()
La appendChild()méthode de l'exemple précédent a ajouté le nouvel élément en tant que dernier enfant du parent.
Si vous ne le souhaitez pas, vous pouvez utiliser la insertBefore()méthode :
Exemple
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Suppression d'éléments HTML existants
Pour supprimer un élément HTML, utilisez la remove()
méthode :
Exemple
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
Exemple expliqué
Le document HTML contient un <div>élément avec deux nœuds enfants (deux <p>
éléments) :
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Recherchez l'élément que vous souhaitez supprimer :
const elmnt = document.getElementById("p1");
Exécutez ensuite la méthode remove() sur cet élément :
elmnt.remove();
La remove()méthode ne fonctionne pas dans les anciens navigateurs, voir l'exemple ci-dessous pour savoir comment l'utiliser à la
removeChild()place.
Suppression d'un nœud enfant
Pour les navigateurs qui ne supportent pas la remove()méthode, il faut trouver le nœud parent pour supprimer un élément :
Exemple
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
Exemple expliqué
Ce document HTML contient un <div>élément avec deux nœuds enfants (deux <p>
éléments) :
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Trouvez l'élément avec id="div1":
const parent = document.getElementById("div1");
Trouvez l' <p>élément avec id="p1":
const child = document.getElementById("p1");
Supprimez l'enfant du parent :
parent.removeChild(child);
Voici une solution de contournement courante : recherchez l'enfant que vous souhaitez supprimer et utilisez sa
parentNodepropriété pour rechercher le parent :
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Remplacement des éléments HTML
Pour remplacer un élément dans le DOM HTML, utilisez la replaceChild()méthode :
Exemple
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>