Element.insertAdjacentElement()

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

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 représentant la position relative de targetElement; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes :
  • 'beforebegin' : Avant element lui-même.
  • 'afterbegin' : A l'intérieur de element, avant son premier élément enfant.
  • 'beforeend' : A l'intérieur de element, après son dernier élément enfant.
  • 'afterend' : Après element 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 si 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'<div> dans un container. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons Insert before et Insert after pour insérer de nouvelles divs avant ou après l'élement sélectionné en utilisant insertAdjacentElement().

Spécifications

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

Compatibilités des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support basique (Oui) 48.0 (48.0) 8 (Oui) (Oui)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support basique ? 48.0 (48.0) ? ? ?

Références

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : gigouni
 Dernière mise à jour par : gigouni,