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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch