Element: insertAdjacentElement()-Methode

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.

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

js
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 dem targetElement selbst.
  • 'afterbegin': Direkt innerhalb des targetElement, vor seinem ersten Kind.
  • 'beforeend': Direkt innerhalb des targetElement, nach seinem letzten Kind.
  • 'afterend': Nach dem targetElement 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

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

js
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
# dom-element-insertadjacentelement

Browser-Kompatibilität

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.

Siehe auch