86. Insérer des éléments dans le DOM

Après avoir créé un nouvel élément, nous avons besoin de méthodes pour le placer par rapport à un élément parent existant.

Configuration

Supposons que nous ayons une référence à l'élément parent : const parent = document.querySelector('#container');

1. appendChild()

Insère le nouvel élément comme le dernier enfant de l'élément parent.

javascript const child = document.createElement('p'); child.textContent = 'Je suis le dernier.';

parent.appendChild(child); // <div id="container">... enfants existants ... <p>Je suis le dernier.</p></div>

2. prepend() (Méthode moderne)

Insère le nouvel élément comme le premier enfant de l'élément parent.

javascript const childFirst = document.createElement('h2'); childFirst.textContent = 'Je suis le premier.';

parent.prepend(childFirst); // <div id="container"><h2>Je suis le premier.</h2> ... enfants existants ... </div>

3. insertAdjacentElement() (Positionnement avancé)

Cette méthode permet un contrôle précis du placement (avant ou après l'élément lui-même, ou comme premier/dernier enfant). Nous l'utiliserons pour un contrôle détaillé de la mise en page.