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

javascriptroditelj.insertBefore(element, ispred koga umetnuti);

Primer

Kreirajmo pasus i postavimo ga ispred drugog pasusa:

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

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

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

parent.insertBefore(p, before);

Rezultat izvršavanja koda:

html<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:

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

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

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

parent.insertBefore(p, parent.firstElementChild);

Rezultat izvršavanja koda:

html<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:

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

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

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

parent.insertBefore(p, parent.firstChild);

Rezultat izvršavanja koda:

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

Pogledajte takođe