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'
: AvanttargetElement
lui-même.'afterbegin'
: A l'intérieur detargetElement
, avant son premier enfant.'beforeend'
: A l'intérieur detargetElement
, après son dernier enfant.'afterend'
: AprèstargetElement
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écifications
Specification |
---|
DOM Standard # dom-element-insertadjacentelement |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
Element.insertAdjacentHTML()
Element.insertAdjacentText()
Node.insertBefore()
Node.appendChild()
( même effet quebeforeend
)