Methode insertAdjacentElement
Die Methode insertAdjacentElement ermöglicht es,
ein Element an beliebiger Stelle auf der Seite einzufügen.
Am häufigsten wird sie nach dem Erstellen eines Elements
mit createElement verwendet.
Der Code wird relativ zum Referenzelement eingefügt.
Man kann das Element vor dem Referenzelement einfügen (Einfügemethode beforeBegin),
nach dem Referenzelement (Einfügemethode afterEnd),
sowie am Anfang (Einfügemethode afterBegin)
oder am Ende (Einfügemethode beforeEnd)
des Referenzelements.
Syntax
ReferenzElement.insertAdjacentElement(Einfügeposition, einzufügendesElement);
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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', 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 p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Ergebnis der Codeausführung:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Siehe auch
-
die Methode
insertAdjacentHTML,
die HTML-Tags an einer bestimmten Stelle einfügt -
die Methode
insertAdjacentText,
die Text an einer bestimmten Stelle einfügt -
die Methode
prepend,
die Elemente am Anfang einfügt -
die Methode
append,
die Elemente am Ende einfügt -
die Methode
appendChild,
die Elemente am Ende des Elternelements einfügt -
die Methode
insertBefore,
die Elemente vor einem Element einfügt
