Metóda insertBefore

Metóda insertBefore umožňuje vložiť prvok pred iný prvok. Najčastejšie sa používa po vytvorení prvku pomocou createElement. Metóda sa aplikuje na rodiča toho prvku, pred ktorým sa vloženie uskutoční.

Syntax

javascriptrodič.insertBefore(prvok, pred kým vložiť);

Príklad

Vytvorme odsek a umiestnime ho pred druhý odsek:

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

Výsledok vykonania kódu:

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

Príklad

Pridajme odsek na začiatok prvku #parent. Na to vložíme náš odsek pred prvého potomka #parent. Tohoto potomka možno nájsť pomocou 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);

Výsledok vykonania kódu:

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

Príklad

Pri odovzdaní druhým parametrom null metóda insertBefore funguje ako appendChild. Zároveň, ak v prvku nie sú žiadne podriadené prvky, firstElementChild vráti null. Preto je možné pridávať na začiatok prvku aj vtedy, keď v ňom nie sú žiadne podriadené prvky:

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

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

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

parent.insertBefore(p, parent.firstChild);

Výsledok vykonania kódu:

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

Pozri tiež