Metod insertBefore

Metod insertBefore omogućava umetanje elementa ispred drugog elementa. Najčešće se koristi nakon kreiranja elementa pomoću createElement. Metod se primenjuje na roditelja onog elementa, ispred koga će se izvršiti umetanje.

Sintaksa

roditelj.insertBefore(element, ispred koga umetnuti);

Primer

Kreirajmo pasus i postavimo ga ispred drugog pasusa:

<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);

Rezultat izvršavanja koda:

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

Primer

Dodajmo pasus na početak elementa #parent. Za to ćemo umetnuti naš pasus ispred prvog potomka #parent. Ovog potomka možemo pronaći pomoću firstElementChild:

<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);

Rezultat izvršavanja koda:

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

Primer

Kada se kao drugi parametar prosledi null metod insertBefore deluje kao appendChild. U isto vreme, ako element nema podređenih elemenata, firstElementChild vraća null. Shodno tome, dodavanje na početak elementa je moguće čak i kada u njemu nema podređenih elemenata:

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

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

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

parent.insertBefore(p, parent.firstChild);

Rezultat izvršavanja koda:

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

Pogledajte takođe

metod prepend,
koji umeće elemente na početak
metod appendChild,
koji umeće elemente na kraj roditelja
metod insertAdjacentElement,
koji umeće element na zadato mesto
metod insertAdjacentHTML,
koji umeće HTML na zadato mesto