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()

La méthode .appendChild()., dans l’exemple précédent, ajoute un élément comme dernier enfant de l’élément parent. Pour ajouter un élément comme premier enfant de son parent, il faut utiliser la méthode .insertBefore()..

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");
    const child = document.getElementById("p1");
    element.insertBefore(para, child);
</script>

Supprimer des éléments HTML existants