Éléments JavaScript HTML DOM
Élément HTML DOM JavaScript
Créer un nouvel élément HTML
Créer un nouvel élément HTML
Pour ajouter un nouvel élément au DOM HTML, vous doit d'abord créer l'élément (nœud d'élément), puis ajouter l'élément à un élément existant.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<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>
</body>
</html>Exemple d'analyse :
Ce code crée un nouvel élément <p> :
var para=document.createElement("p");
Pour ajouter du texte à l'élément <p>, vous devez d'abord créer un nœud de texte. Ce code crée un nœud de texte :
var node=document.createTextNode("Ceci est un nouveau paragraphe.");
Ensuite, vous devez l'ajouter au <p> ; element Ajoutez ce nœud de texte :
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");
Le code suivant trouve un élément existant Puis ajoutez un nouvel élément :
element.appendChild(para);
Supprimer l'élément HTML existant
Ce code ajoute un nouvel élément à l'élément existant Element :
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<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>
</body>
</html>Ce document HTML contient un élément <div> avec deux nœuds enfants (deux éléments <p>) :
<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div>
Recherchez l'élément avec id="div1":
var parent=document.getElementById("div1");
Recherchez l'élément <p> avec id="p1":
var child=document. p1");
Supprimer les éléments enfants des éléments parents :
parent.removeChild(child);
Ce serait bien si vous pouviez supprimer un élément sans référencer l'élément parent.
Mais c'est dommage. Le DOM doit connaître l'élément que vous devez supprimer et son élément parent.
Il s'agit d'une solution courante : recherchez l'élément enfant que vous souhaitez supprimer, puis utilisez sa propriété parentNode pour trouver l'élément parent :
var child=document.getElementById ( "p1");
child.parentNode.removeChild(child);
Tutoriel HTML DOM
Dans la section HTML DOM de notre tutoriel JavaScript, vous avez appris :
Comment changer le contenu d'un élément HTML (innerHTML) Comment changer le style d'un élément HTML (CSS) Comment réagir aux événements HTML DOM Comment ajouter ou supprimer des éléments HTML
