Javascript insertBefore()

Elemente mit insertBefore einfügen

insertBefore fügt ausschließlich Node-Elemente ein und keine Strings. Dafür muss sowohl das Element identifiziert werden, vor dem ein neuer Knoten eingefügt wird, als auch das parentElement.

reference.parentElement.insertBefore (newChild, reference);

<ul class="demolist">
	<figure>
		<img src="lamp1.webp" width="500" height="540" alt="lamp2">
	</figure>
	<figure>
		<img src="lamp2.webp" width="500" height="540" alt="lamp2">
	</figure>
</ul>

const list = document.querySelectorAll (".demolist figure");

const figure = document.createElement ("figure");
const img = document.createElement ("img");
img.src = "lamp3.webp";

list[1].parentElement.insertBefore (img, list[1]);

// oder alternativ 

const neu = list[1].parentElement.insertBefore (img, list[1]);

Der Rückgabewert von insertBefore ist das neu eingefügte Element. Das macht Sinn, wenn das neue Element noch an anderer Stelle gebraucht wird.

Element mit insertBefore versetzen

Wenn das einzufügende Element bereits an einer anderen Stelle des DOM existiert, entfernt der Aufruf von insertBefore das Element und versetzt es an die neue Position.

const abseits = document.querySelector ("#abseits");
list[1].parentElement.insertBefore (abseits, list[1], list[1)

Weitere Methoden zum Einfügen von Elementen

insertBefore () ist eine alte DOM-Methode, ein insertAfter () gibt es nicht. Die modernen Browser unterstützen before () und after () und fügen Elemente ohne Umweg über das Parent-Element als previous Sibling oder next Sibling ein. Wer auf IE verzichten kann:

before ist die modernere Variante von insertBefore und für einen oder mehrere Elemente oder Textknoten vor einem Element ein. Dafür muss before nicht mehr das Eltern-Element identifizieren, so dass der Aufruf von before deutlich einfacher ist.