Methode insertAdjacentHTML

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

Syntax

javascriptReferenzelement.insertAdjacentHTML(Einfügemethode, einzufügender Code);

Beispiel . Methode beforeBegin

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Ergebnis der Codeausführung:

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

Beispiel . Methode afterEnd

Fügen wir nun einen neuen Absatz nach dem Referenzelement ein:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

Ergebnis der Codeausführung:

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

Beispiel . Methode afterBegin

Fügen wir einen neuen Absatz am Anfang des Referenzelements ein:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

Ergebnis der Codeausführung:

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

Beispiel . Methode beforeEnd

Fügen wir einen neuen Absatz am Ende des Referenzelements ein:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Ergebnis der Codeausführung:

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

Siehe auch