Metoda insertBefore

Metoda insertBefore omogoča vstavljanje elementa pred drug element. Najpogosteje se uporablja po ustvarjanju elementa z metodo createElement. Metoda se uporablja na staršu elementa, pred katerim se bo izvedla vstavitev.

Sintaksa

starš.insertBefore(element, pred koga vstaviti);

Primer

Ustvarimo odstavek in ga postavimo pred drugi odstavek:

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

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

Primer

Dodajmo odstavek na začetek elementa #parent. Za to bomo vstavili naš odstavek pred prvega potomca #parent. Tega potomca lahko najdemo z 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 izvajanja kode:

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

Primer

Pri posredovanju drugega parametra null metoda insertBefore deluje kot appendChild. Hkrati, če element nima podrejenih elementov, firstElementChild vrne null. Posledično je dodajanje na začetek elementa mogoče tudi takrat, ko v njem ni podrejenih elementov:

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

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

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

parent.insertBefore(p, parent.firstChild);

Rezultat izvajanja kode:

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

Glejte tudi

metoda prepend,
ki vstavi elemente na začetek
metoda appendChild,
ki vstavi elemente na konec starša
metoda insertAdjacentElement,
ki vstavi element na določeno mesto
metoda insertAdjacentHTML,
ki vstavi oznake na določeno mesto