Javascript insertBefore()

Javascript insertBefore – einfügen

insertBefore () fügt ein neues Element als childNode vor einem beliebigen Element unterhalb eines parentElement ein. Alternativ versetzt insertBefore () ein bereits existierendes Element an die gewünschte Position.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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);
Diagram: insertBefore Element platzieren
<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>
    lamp2
    lamp2
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:

MethodeNode-ObjekteStringsPosition
appendChild ()Node-ObjektEnde des Elements
insertBefore ()Node-Objektvor einem Kind-Element des Eltern-Elements als previous Sibling
insertAdjacentElement ()Node-Objektbeforebegin
afterbegin
beforeend
afterend
append ()ein oder mehrere Node-ObjekteText-String oder DOM-StringAls childNode ans Ende des Elements
prepend ()ein oder mehrere Node-ObjekteText-String oder DO;-StringAls childNode am Anfang des Elements
before ()Node-ObjektText-StringAls Sibling vor dem Element
after ()Node-ObjektText-StringAls Sibling nach dem Element
Eigenschaft Node-ObjekteStringsPosition
innerHTMLDOM-Stringsersetzt das vollständige Element