DOM - Noeuds

Le JavaScript et le DOM permettent d’ajouter ou de supprimer des nœuds - c’est-à-dire des éléments HTML.

Créer de nouveaux éléments HTML

Pour ajouter un nouvel élément au DOM HTML, il faut d’abord le créer - créer l’élément nœud -, 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>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

const element = document.getElementById("div1");
element.appendChild(para);
</script>

Explication de l’exemple :

Pour commencer, un nouvel élément paragraphe (<p>) est créé. Ensuite, un nœud texte est créé ayant pour valeur “this is new”. Ensuite, ce nœud est ajouté à l’élément paragraphe, puis le paragraphe est lui-même ajouté à l’élément div1.

Créer des éléments HTML - insertBefore()