Element : méthode insertAdjacentElement()

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2018.

En savoir plus
Voir la compatibilité complète

La méthode insertAdjacentElement() de l'interface Element insère un nœud d'élément donné à une position donnée par rapport à l'élément sur lequel elle est invoquée.

Syntaxe

insertAdjacentElement(position, element)

Paramètres

position

Une chaîne de caractères représentant la position par rapport à targetElement ; cela doit correspondre (sans tenir compte de la casse) à l'une des chaînes de caractères suivantes :

'beforebegin' : Avant l'élément du targetElement même.
'afterbegin' : À l'intérieur de l'élément du targetElement, avant son premier enfant.
'beforeend' : À l'intérieur de l'élément du targetElement, après son dernier enfant.
'afterend' : Après l'élément du targetElement même.

element

L'élément à insérer dans l'arbre.

Valeur retournée

L'élément inséré ou null si l'insertion a échouée.

Exceptions

SyntaxError DOMException: Levée si la position définie n'est pas une valeur reconnue.
TypeError: Levée si un element défini n'est pas un élément valide.

Visualisation des noms de position

html

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  toto
  <!-- beforeend -->
</p>
<!-- afterend -->

Note : Les positions beforebegin et afterend ne fonctionnent que si le nœud est dans l'arbre et possède un élément parent.

Dans cet exemple, nous avons une rangée de cases carrées. L'utilisateur·ice peut sélectionner une case en cliquant dessus : cela donne à la case une bordure différente, pour montrer qu'elle est sélectionnée.

Si une case est sélectionnée et que l'utilisateur·ice appuie sur les boutons « Insérer avant » ou « Insérer après », alors le code crée une nouvelle case, lui donne une couleur aléatoire et l'insère avant ou après la case sélectionnée.

HTML

html

<p>
  Cliquez sur une case colorée pour la sélectionner, puis utilisez les deux
  premiers boutons ci-dessous pour insérer des éléments avant et après votre
  sélection.
</p>

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

<button class="avant">Insérer avant</button>
<button class="apres">Insérer après</button>
<button class="reinitialiser">Réinitialiser la démo</button>

CSS

css

div {
  width: 50px;
  height: 50px;
  margin: 3px;
  border: 3px solid black;
  display: inline-block;
  background-color: red;
}

.selectionne {
  border-color: aqua;
}

JavaScript

let elemSelectionne;

// Fonction pour sélectionner un nouvel élément
function selectionnerElement(nouvelleSelection) {
  if (elemSelectionne !== nouvelleSelection) {
    if (elemSelectionne) {
      elemSelectionne.classList.remove("selectionne");
    }
    elemSelectionne = nouvelleSelection;
    nouvelleSelection.classList.add("selectionne");
  }
}

// Ajouter des gestionnaires de clic qui sélectionnent l'élément cliqué
const initElems = Array.from(document.querySelectorAll("section div"));
for (const initElem of initElems) {
  initElem.addEventListener("click", (e) => selectionnerElement(e.target));
}

// Ajouter des gestionnaires de clic aux boutons "avant" et "apres"
// pour insérer un nouvel élément avant/après l'élément sélectionné
const btnAvant = document.querySelector(".avant");
const btnApres = document.querySelector(".apres");
btnAvant.addEventListener("click", () => insererNouvelElement("beforebegin"));
btnApres.addEventListener("click", () => insererNouvelElement("afterend"));

function insererNouvelElement(position) {
  function aleatoire(max) {
    return Math.floor(Math.random() * max);
  }

  if (!elemSelectionne) {
    return;
  }

  const nouvelElement = document.createElement("div");
  const couleurAleatoire = `rgb(${aleatoire(255)} ${aleatoire(255)} ${aleatoire(255)})`;
  nouvelElement.style.backgroundColor = couleurAleatoire;
  nouvelElement.addEventListener("click", (e) => selectionnerElement(e.target));

  elemSelectionne.insertAdjacentElement(position, nouvelElement);
}

// Réinitialiser l'exemple
const btnReinitialiser = document.querySelector(".reinitialiser");
btnReinitialiser.addEventListener("click", () => window.location.reload(true));

Résultat

Spécifications

Spécification
DOM # dom-element-insertadjacentelement

Compatibilité des navigateurs

Voir aussi

La méthode Element.insertAdjacentHTML()
La méthode Element.insertAdjacentText()
La méthode Node.insertBefore() (similaire à beforebegin, avec des arguments différents)
La méthode Node.appendChild() (même effet que beforeend)

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 31 juil. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu