Element insertBefore()

Sollten wir ein Element neu erzeugen, wird durch die Methode target.appendChild() das neu erzeugte Element an das Ende des Parent-Elements gesetzt.
Siehe Beispiel 1.

Möchtest Du jedoch das neu erzeugte Element als firstChild in das Ziel-Element schreiben, musst Du mit der Methode insertBefore() arbeiten.
Siehe Beispiel 2.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel 1: appendChild

Target

Erstes Div innerhalb des Target-Elementes

Testen

Beispiel 2: insertBefore()

Target 2

Erstes Div innerhalb des Target-Elementes

Testen

Code Beispiel 2
Code


HTML:

<div id="target_2">
	Target 2
	<div id="first_element_2">
		Erstes Div innerhalb des Target-Elementes
	</div>
</div> 



JavaScript:

let count_b2 = 0;
function element_create_before(){

	// Zähle Durchlauf der Funktion
	count_b2++;

	// Target zuweisen
	let target_2 = document.querySelector('#target_2'); // Target ermitteln
	
	// Neue Element "DIV" erzeugen
	let newdiv_2 = document.createElement('div'); 
	
	// ID zuweisen
	newdiv_2.setAttribute('id','b2_new_div_'+count_b2);
	
	// Class zuweisen
	newdiv_2.setAttribute('class','myNewDiv');
	
	// Inhalt zuweisen über append()
	newdiv_2.append("Hello! I am a new DIV #"+count_b2);
	
	// Neuen Knoten erzeugen Kindelement von Target-Element als erstes Kind zuweisen
	target_2.insertBefore(newdiv_2, target_2.firstChild);
}