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

Ce chapitre décrit comment ajouter et supprimer des éléments (nœuds) dans un document.

Création de nouveaux éléments HTML (nœuds) - appendChild()

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

Analyse de l'exemple

Le code suivant est utilisé pour créer un élément <p> :

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

Créer un nouveau nœud de texte pour l'élément <p> :

var node = document.createTextNode("这是一个新的段落。");

Ajouter le nœud de texte à l'élément <p> :

para.appendChild(node);

Enfin, ajoutez l'élément p à un élément existant.

Trouvez un élément existant :

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

Ajoutez à un élément existant :

element.appendChild(para);

Création de nouveaux éléments HTML (nœuds) - insertBefore()

Dans l'exemple ci-dessus, nous avons utilisé la méthodeappendChild(), qui sert à ajouter de nouveaux éléments à la fin.

Si nous devons ajouter le nouvel élément au début, nous pouvons utiliser la méthodeinsertBefore():

Suppression d'éléments existants

Pour supprimer un élément, vous devez connaître l'élément parent de cet élément.

Remarque :Les anciens navigateurs Internet Explorer ne prennent pas en charge la méthode node.remove().

Analyse de l'exemple

Dans le document HTML, l'élément <div> contient deux nœuds enfants (deux éléments <p>) :

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

Trouvez l'élément avec id="div1" :

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

Trouvez l'élément <p> avec id="p1" :

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

Supprimer l'élément enfant de l'élément parent :

parent.removeChild(child);

	Ce serait formidable si vous pouviez supprimer un élément sans faire référence à son parent. Malheureusement, cela ne fonctionne pas ainsi. Le DOM doit connaître l'élément que vous souhaitez supprimer et son élément parent

Le code suivant trouve l'élément enfant à supprimer, trouve son élément parent, puis supprime cet élément enfant (vous devez connaître le nœud parent pour supprimer un nœud) :

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

Remplacer des éléments HTML - replaceChild()

Nous pouvons utiliser la méthode replaceChild() pour remplacer des éléments dans le DOM HTML.

Tutoriel HTML DOM

Dans la section HTML DOM de notre tutoriel JavaScript, vous avez appris :

• Comment modifier le contenu d'un élément HTML (innerHTML)
• Comment modifier le style d'un élément HTML (CSS)
• Comment réagir aux événements HTML DOM
• Comment ajouter ou supprimer des éléments HTML

Si vous souhaitez en savoir plus sur l'utilisation de JavaScript pour accéder au DOM HTML, veuillez consulter notreTutoriel complet sur le DOM HTML。