Javascript insertBefore()

Elemente mit insertBefore einfügen

insertBefore () fügt ausschließlich Node-Elemente ein und keine Strings. Dafür muss sowohl das Element, vor dem der neue Knoten eingefügt wird, identifiziert werden, 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: