Éléments (nœuds) HTML DOM JavaScript

Ajouter et supprimer des nœuds (éléments HTML)

Créer un nouveau HTML élément (nœud)

Pour ajouter un nouvel élément au DOM HTML, vous devez d'abord créer cet élément (nœud d'élément), puis le joindre à un élément existant.

Exemple

<div id="div1">
<p id="p1">C'est un paragraphe.</p>
<p id="p2">C'est un autre paragraphe.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("C'est le nouveau texte.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

Essayez vous-même

exemples d'explication

Ce code crée un nouveau <p> Élément :

var para = document.createElement("p");

Pour ajouter <p> Pour ajouter un texte à un élément, il faut d'abord créer un nœud texte. Ce code crée un nœud texte :

var node = document.createTextNode("Ceci est un nouveau paragraphe.");

Ensuite, vous devez ajouter <p> Ajouter ce nœud texte à l'élément :

para.appendChild(node);

Enfin, vous devez ajouter ce nouvel élément à l'élément existant.

Ce code recherche un élément existant :

var element = document.getElementById("div1");

Ce code ajoute un nouvel élément à cet élément existant :

element.appendChild(para);

Créer un nouvel élément HTML - insertBefore()

Dans l'exemple précédent, appendChild() méthode, ajouter un nouvel élément en tant que dernier enfant du parent.

En plus de cela, vous pouvez également utiliser insertBefore() Méthode :

Exemple

<div id="div1">
<p id="p1">C'est un paragraphe.</p>
<p id="p2">C'est un autre paragraphe.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("C'est le nouveau texte.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Essayez vous-même

supprimer l'élément HTML existant

Pour supprimer un élément HTML, utilisez 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>

Essayez vous-même

exemples d'explication

Ce document HTML contient un nœud avec deux enfants (deux <p> l'élément ) de <div> Élément :

<div>
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

Trouver l'élément à supprimer :

const elmnt = document.getElementById("p1");

Puis exécutez sur cet élément remove() Méthode :

elmnt.remove();

Attention :La méthode remove() ne fonctionne pas dans les anciens navigateurs, veuillez consulter les exemples ci-dessous pour savoir comment utiliser removeChild()。

supprimer les nœuds enfants

pour ceux qui ne supportent pas remove() Pour supprimer un élément, vous devez trouver le nœud parent dans le navigateur,

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>

Essayez vous-même

exemples d'explication

Ce document HTML contient un nœud avec deux enfants (deux <p> l'élément ) de <div> Élément :

<div id="div1">
  <p id="p1">This is a paragraph.</p>
  <p id="p2">This is another paragraph.</p>
</div>

trouver id="div1" l'élément :

const parent = document.getElementById("div1");

trouver id="p1" de <p> Élément :

const child = document.getElementById("p1");

Supprimer l'enfant d'un élément parent :

parent.removeChild(child);

C'est une méthode courante de résolution : trouver le nœud enfant à supprimer et utiliser son parentNode Propriété trouvée pour le nœud parent :

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

Remplacement d'éléments HTML

Pour remplacer un élément, utilisez replaceChild() Méthode :

Exemple

<div id="div1">
<p id="p1">C'est un paragraphe.</p>
<p id="p2">C'est un autre paragraphe.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("C'est le nouveau texte.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Essayez vous-même