Element.insertAdjacentElement()

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

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

<!-- 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

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écification

Spécification Statut Commentaire
DOM
La définition de 'insertAdjacentElement()' dans cette spécification.
Standard évolutif

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
insertAdjacentElementChrome Support complet 1Edge Support complet 17
Support complet 17
Aucun support 12 — 17
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Support complet 48IE Support complet 8
Notes
Support complet 8
Notes
Notes This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Support complet 8Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 48Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi