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); //

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); //

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.