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 créer l'élément (nœud d'élément) d'abord, 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>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> Essayez - le vous - même » Exemple Explained
Ce code crée un nouveau <p> élément:
var para = document.createElement("p");
Pour ajouter du texte à la <p> élément, vous devez d' abord créer un nœud de texte. Ce code crée un nœud de texte:
var node = document.createTextNode("This is a new paragraph.");
Ensuite , vous devez ajouter le nœud de texte à la <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:
var
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()
Le appendChild() méthode dans l'exemple précédent, le nouvel élément ajouté que le dernier enfant du parent.
Si vous ne voulez pas que vous pouvez utiliser le 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>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> Essayez - le vous - même » Suppression d'éléments HTML existants
Pour supprimer un élément HTML, vous devez connaître le parent de l'élément:
Exemple
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> Essayez - le vous - même » Le procédé node.remove() est mise en oeuvre dans la spécification DOM 4.
Mais en raison du soutien du navigateur pauvre, vous ne devriez pas l'utiliser.
Exemple Explained
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>
Trouver l'élément avec id="div1" :
var parent = document.getElementById("div1");
Trouver l'élément <p> avec id="p1" :
var child = document.getElementById("p1");
Retirez l'enfant du parent:
parent.removeChild(child);
Il serait agréable d'être en mesure de retirer un élément sans se référer à la société mère.
Mais désolé. Le DOM doit connaître à la fois l'élément que vous souhaitez supprimer, et son parent.
Voici une solution de contournement commune: Trouver l'enfant que vous souhaitez supprimer, et utiliser sa propriété parentNode pour trouver le parent:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Remplacement des éléments HTML
Pour remplacer un élément du DOM HTML, utilisez le 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>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> Essayez - le vous - même »