Element: insertAdjacentElement()-Methode
Die insertAdjacentElement()
-Methode der Element
-Schnittstelle fügt ein gegebenes Elementknoten an einer angegebenen Position relativ zu dem Element ein, auf dem sie aufgerufen wurde.
Syntax
insertAdjacentElement(position, element)
Parameter
position
-
Ein String, der die Position relativ zum
targetElement
darstellt. Er muss (groß-/kleinschreibungsunabhängig) mit einem der folgenden Strings übereinstimmen:'beforebegin'
: Vor demtargetElement
selbst.'afterbegin'
: Direkt innerhalb destargetElement
, vor seinem ersten Kind.'beforeend'
: Direkt innerhalb destargetElement
, nach seinem letzten Kind.'afterend'
: Nach demtargetElement
selbst.
element
-
Das Element, das in den Baum eingefügt werden soll.
Rückgabewert
Das Element, das eingefügt wurde, oder null
, wenn das Einfügen fehlgeschlagen ist.
Ausnahmen
SyntaxError
DOMException
-
Wird ausgelöst, wenn die angegebene
position
keinen anerkannten Wert darstellt. TypeError
-
Wird ausgelöst, wenn das angegebene
element
kein gültiges Element ist.
Visualisierung der Positionsnamen
<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
Hinweis: Die Positionen beforebegin
und afterend
funktionieren nur, wenn der Knoten sich in einem Baum befindet und einen Elementelternteil hat.
Beispiele
beforeBtn.addEventListener("click", () => {
const tempDiv = document.createElement("div");
tempDiv.style.backgroundColor = randomColor();
if (activeElem) {
activeElem.insertAdjacentElement("beforebegin", tempDiv);
}
setListener(tempDiv);
});
afterBtn.addEventListener("click", () => {
const tempDiv = document.createElement("div");
tempDiv.style.backgroundColor = randomColor();
if (activeElem) {
activeElem.insertAdjacentElement("afterend", tempDiv);
}
setListener(tempDiv);
});
Schauen Sie sich unser insertAdjacentElement.html-Demo auf GitHub an (siehe auch den Quellcode.) Hier haben wir eine Abfolge von <div>
-Elementen innerhalb eines Containers. Wenn eines angeklickt wird, wird es ausgewählt und Sie können dann die Vorher einfügen und Nachher einfügen-Buttons drücken, um neue Divs vor oder nach dem ausgewählten Element mit insertAdjacentElement()
einzufügen.
Spezifikationen
Specification |
---|
DOM Standard # dom-element-insertadjacentelement |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
Element.insertAdjacentHTML()
Element.insertAdjacentText()
Node.insertBefore()
(ähnlich wiebeforebegin
, jedoch mit anderen Argumenten)Node.appendChild()
(gleicher Effekt wiebeforeend
)