Element: insertAdjacentText()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2018.

Die insertAdjacentText()-Methode des Element-Interfaces fügt an einer angegebenen relativen Position und basierend auf einem übergebenen String einen neuen Textknoten relativ zu dem Element ein, von dem sie aufgerufen wird.

Syntax

insertAdjacentText(where, data)

Parameter

where

Ein String, der die Position relativ zu dem Element darstellt, von dem die Methode aufgerufen wird. Er muss einer der folgenden Strings sein:

'beforebegin': Vor dem element selbst.
'afterbegin': Direkt innerhalb des element, vor dessen erstem Kind.
'beforeend': Direkt innerhalb des element, nach dessen letztem Kind.
'afterend': Nach dem element selbst.

data

Ein String, aus dem ein neuer Textknoten erstellt wird, der an der angegebenen Position where relativ zu dem Element eingefügt wird, von dem die Methode aufgerufen wird.

Rückgabewert

Keiner (undefined).

Ausnahmen

SyntaxError DOMException: Wird ausgelöst, wenn where keinen anerkannten Wert hat.

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 ein Element-Elternteil hat.

Beispiele

beforeBtn.addEventListener("click", () => {
  para.insertAdjacentText("afterbegin", textInput.value);
});

afterBtn.addEventListener("click", () => {
  para.insertAdjacentText("beforeend", textInput.value);
});

Werfen Sie einen Blick auf unser insertAdjacentText.html Demo auf GitHub (siehe auch den Quellcode). Hier haben wir einen einfachen Absatz. Sie können etwas Text in das Formularelement eingeben und dann die Schaltflächen Insert before und Insert after drücken, um ihn vor oder nach dem bestehenden Absatztext mit insertAdjacentText() einzufügen. Beachten Sie, dass der vorhandene Textknoten nicht ergänzt wird – es werden weitere Textknoten erstellt, die die neuen Ergänzungen enthalten.

Spezifikationen

Specification
DOM # dom-element-insertadjacenttext