Methode insertAdjacentText

Die Methode insertAdjacentText ermöglicht es, eine Zeichenkette an beliebiger Stelle auf der Seite einzufügen. Die Zeichenkette wird relativ zu einem Referenzelement eingefügt. Man kann die Einfügung vor dem Referenzelement durchführen (Einfügemethode 'beforeBegin'), nach ihm (Einfügemethode 'afterEnd'), sowie am Anfang (Einfügemethode 'afterBegin') oder am Ende (Einfügemethode 'beforeEnd') des Referenzelements.

Syntax

javascriptreferenzElement.insertAdjacentText(einfügeMethode, textZumEinfügen);

Beispiel . Methode beforeBegin

Angenommen, das Referenzelement ist das Element #target. Fügen wir davor einen Text ein:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');

Ergebnis der Codeausführung:

htmltext
<div id="target">
  <p>elem</p>
</div>

Beispiel . Methode afterEnd

Fügen wir nun einen Text nach dem Referenz- element ein:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');

Ergebnis der Codeausführung:

html<div id="target">
  <p>elem</p>
</div>
text

Beispiel . afterBegin

Fügen wir einen Text am Anfang des Referenzelements ein:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');

Ergebnis der Codeausführung:

html<div id="target">
  text
  <p>elem</p>
</div>

Beispiel . Methode beforeEnd

Fügen wir einen Text am Ende des Referenzelements ein:

html<div id="target">
  <p>elem</p>
</div>

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');

Ergebnis der Codeausführung:

html<div id="target">
  <p>elem</p>
  text
</div>

Siehe auch