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

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

Beispiel . Methode beforeBegin

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

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

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

Ergebnis der Codeausführung:

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

Beispiel . Methode afterEnd

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

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

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

Ergebnis der Codeausführung:

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

Beispiel . Methode afterBegin

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

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

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

Ergebnis der Codeausführung:

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

Beispiel . Methode beforeEnd

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

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

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

Ergebnis der Codeausführung:

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

Siehe auch

Methode insertAdjacentText,
die Text an einer bestimmten Stelle einfügt
Methode insertAdjacentElement,
die ein Element an einer bestimmten Stelle einfügt
Methode prepend,
die Elemente am Anfang einfügt
Methode append,
die Elemente am Ende einfügt
Methode appendChild,
die Elemente am Ende des Elternelements einfügt
Methode insertBefore,
die Elemente vor einem Element einfügt