Element: Methode insertAdjacentText()

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 insertAdjacentText()-Methode des Element-Interfaces fügt, basierend auf einer relativen Position und einem String, einen neuen Textknoten an der angegebenen Position relativ zu dem Element, von dem aus sie aufgerufen wird, ein.

Syntax

js
insertAdjacentText(where, data)

Parameter

where

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

  • 'beforebegin': Vor dem element selbst.
  • 'afterbegin': Direkt im element, vor seinem ersten Kind.
  • 'beforeend': Direkt im element, nach seinem letzten Kind.
  • 'afterend': Nach dem element selbst.
data

Ein String, aus dem ein neuer Textknoten erstellt werden soll, 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 kein anerkannter Wert ist.

Visualisierung der Positionsnamen

html
<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Hinweis: Die Positionen beforebegin und afterend funktionieren nur, wenn der Knoten in einem Baum ist und ein Element-Parent hat.

Beispiele

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

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

Sehen Sie sich unser insertAdjacentText.html Demo auf GitHub an (sehen Sie sich auch den Quellcode an). Hier haben wir einen einfachen Absatz. Sie können Text in das Formularelement eingeben und dann die Buttons Vorher einfügen und Nachher einfügen drücken, um ihn mit insertAdjacentText() vor oder nach dem vorhandenen Absatztext einzufügen. Beachten Sie, dass der vorhandene Textknoten nicht erweitert wird—weitere Textknoten werden erstellt, die die neuen Ergänzungen enthalten.

Spezifikationen

Specification
DOM Standard
# dom-element-insertadjacenttext

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch