Methode insertBefore

Die Methode insertBefore ermöglicht das Einfügen eines Elements vor einem anderen Element. Am häufigsten wird sie verwendet, nachdem ein Element mit createElement erstellt wurde. Die Methode wird auf das übergeordnete Element des Elements angewendet, vor dem die Einfügung erfolgen soll.

Syntax

Elternelement.insertBefore(Element, vor welchem eingefügt werden soll);

Beispiel

Erstellen wir einen Absatz und platzieren ihn vor dem zweiten Absatz:

<div id="parent">
	<p>Elem 1</p>
	<p id="before">Elem 2</p>
	<p>Elem 3</p>
</div>

let parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

Ergebnis der Codeausführung:

<div id="parent">
	<p>Elem 1</p>
	<p>!</p>
	<p>Elem 2</p>
	<p>Elem 3</p>
</div>

Beispiel

Fügen wir einen Absatz am Anfang des Elements #parent hinzu. Dazu fügen wir unseren Absatz vor dem ersten Kindelement #parent ein. Dieses Kindelement kann mit firstElementChild gefunden werden:

<div id="parent">
	<p>Elem 1</p>
	<p>Elem 2</p>
</div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

Ergebnis der Codeausführung:

<div id="parent">
	<p>!</p>
	<p>Elem 1</p>
	<p>Elem 2</p>
</div>

Beispiel

Wenn null als zweiter Parameter übergeben wird, verhält sich die Methode insertBefore wie appendChild. Gleichzeitig gibt firstElementChild null zurück, wenn das Element keine untergeordneten Elemente hat. Folglich kann man auch am Anfang eines Elements Elemente hinzufügen, selbst wenn es keine untergeordneten Elemente enthält:

<div id="parent"></div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

Ergebnis der Codeausführung:

<div id="parent">
	<p>!</p>
</div>

Siehe auch

die Methode prepend,
die Elemente am Anfang einfügt
die Methode appendChild,
die Elemente am Ende des Elternelements einfügt
die Methode insertAdjacentElement,
die ein Element an einer bestimmten Stelle einfügt
die Methode insertAdjacentHTML,
die HTML-Code an einer bestimmten Stelle einfügt