Metoda insertBefore

Metoda insertBefore umožňuje vložit prvek před jiný prvek. Nejčastěji se používá po vytvoření prvku pomocí createElement. Metoda se aplikuje na rodiče toho prvku, před kterým dojde k vložení.

Syntaxe

rodič.insertBefore(prvek, před kým vložit);

Příklad

Vytvoříme odstavec a umístíme jej před druhý odstavec:

<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ýsledek provedení kódu:

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

Příklad

Přidáme odstavec na začátek prvku #parent. K tomu vložíme náš odstavec před prvního potomka #parent. Tohoto potomka lze najít pomocí 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ýsledek provedení kódu:

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

Příklad

Při předání druhým parametrem null metoda insertBefore funguje jako appendChild. Zároveň, pokud prvek nemá podřízené prvky, firstElementChild vrací null. Proto lze přidávat na začátek prvku i tehdy, když v něm nejsou žádné podřízené prvky:

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

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

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

parent.insertBefore(p, parent.firstChild);

Výsledek provedení kódu:

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

Viz také

metoda prepend,
která vkládá prvky na začátek
metoda appendChild,
která vkládá prvky na konec rodiče
metoda insertAdjacentElement,
která vkládá prvek na zadané místo
metoda insertAdjacentHTML,
která vkládá tagy na zadané místo