Element.insertAdjacentElement()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

La méthode insertAdjacentElement() insère un noeud d'élément donné à une position donnée par rapport à l'élément sur lequel il est appelé.

Syntaxe

js
targetElement.insertAdjacentElement(position, element);

Paramètres

position

Un objet DOMString (chaîne de caractères) représentant la position par rapport à targetElement ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :

  • 'beforebegin' : Avant targetElement lui-même.
  • 'afterbegin' : A l'intérieur de targetElement, avant son premier enfant.
  • 'beforeend' : A l'intérieur de targetElement, après son dernier enfant.
  • 'afterend' : Après targetElement lui-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

Exception Explications
SyntaxError La position donnée n'est pas une valeur reconnue.
TypeError L'element spécifié n'est pas un élément valide.

Visualisation des positionnements

html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

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

Exemple

js
beforeBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("beforebegin", tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("afterend", tempDiv);
  }
  setListener(tempDiv);
});

Une démo de notre insertAdjacentElement.html est disponible sur Github ( avec le code source ). Nous avons un ensemble d'éléments <div> dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons Insert before (insérer avant) et Insert after (insérer après) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant insertAdjacentElement().

Spécifications

Specification
DOM
# dom-element-insertadjacentelement

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertAdjacentElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Voir aussi