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

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

Príklad

Vytvorme odsek a umiestnime ho pred druhý odsek:

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

Výsledok vykonania kódu:

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

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

Výsledok vykonania kódu:

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Výsledok vykonania kódu:

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

Pozri tiež

metóda prepend,
ktorá vkladá prvky na začiatok
metóda appendChild,
ktorá vkladá prvky na koniec rodiča
metóda insertAdjacentElement,
ktorá vkladá prvok na zadané miesto
metóda insertAdjacentHTML,
ktorá vkladá značky na zadané miesto