Nœuds DOM JavaScript
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
Ceci est un paragraphe.
Ceci est un autre paragraphe.
Essayez-le vous-même »
Exemple expliqué
Ce code crée un nouveau <p> élément:
const para = document.createElement(« p »);
Pour ajouter du texte au <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(« Ceci est un nouveau paragraphe. »);
Ensuite, vous devez ajouter le nœud de texte au <p> élément:
Enfin, vous devez ajouter le nouvel élément à un élément existant.
Ce code trouve un élément existant :
élément const = 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()
Le appendChild() méthode dans 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 le insertBefore() méthode:
Exemple
Ceci est un paragraphe.
Ceci est un autre paragraphe.
Essayez-le vous-même »
Suppression d’éléments HTML existants
Pour supprimer un élément HTML, utilisez la remove()
méthode:
Exemple
Ceci est un paragraphe.
Ceci est un autre paragraphe.
Essayez-le vous-même »
Exemple expliqué
Le document HTML contient un <div> élément avec deux nœuds enfants (deux <p>
éléments):
Ceci est un paragraphe.
Ceci est un autre paragraphe.
Recherchez l’élément que vous souhaitez supprimer :
const elmnt = document.getElementById(« p1 »);
Exécutez ensuite la méthode remove() sur cet élément :
Le remove() méthode ne fonctionne pas dans les anciens navigateurs, voir l’exemple ci-dessous sur la façon d’utiliser
removeChild()
Suppression d’un nœud enfant
Pour les navigateurs qui ne prennent pas en charge le remove() méthode, vous devez trouver le nœud parent pour supprimer un élément :
Exemple
Ceci est un paragraphe.
Ceci est un autre paragraphe.
Essayez-le vous-même »
Exemple expliqué
Ce document HTML contient un <div> élément avec deux nœuds enfants (deux <p>
éléments):
Ceci est un paragraphe.
Ceci est un autre paragraphe.
Trouvez l’élément avec id="div1":
const parent = document.getElementById(« div1 »);
Trouvez le <p> élément avec id="p1":
const enfant = document.getElementById(« p1 »);
Supprimez l’enfant du parent :
parent.removeChild(enfant);
Voici une solution de contournement courante : recherchez l’enfant que vous souhaitez supprimer et utilisez son
parentNode propriété pour trouver le parent:
const enfant = document.getElementById(« p1 »);
enfant.parentNode.removeChild(enfant);
Remplacement des éléments HTML
Pour remplacer un élément dans le DOM HTML, utilisez la replaceChild() méthode:
Exemple
Ceci est un paragraphe.
Ceci est un autre paragraphe.
Essayez-le vous-même »
#Nœuds #DOM #JavaScript