Метод insertBefore

Метод insertBefore омогућава да се уметне елемент испред другог елемента. Најчешће се користи након креирања елемента помоћу createElement. Метод се примењује на родитеља оног елемента, испред кога ће се уметнути елемент.

Синтакса

родитељ.insertBefore(елемент, испред кога уметнути);

Пример

Креирајмо пасус и поставимо га испред другог пасуса:

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

Резултат извршавања кода:

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

Пример

Додајмо пасус на почетак елемента #parent. За то ћемо уметнути наш пасус испред првог детењачета #parent. То детењече можемо пронаћи помоћу 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);

Резултат извршавања кода:

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

Пример

Приликом прослеђивања другог параметра null метод insertBefore делује као appendChild. Истовремено, ако елемент нема дечје елементе, firstElementChild враћа null. Према томе, додавање на почетак елемента је могуће чак и када у њему нема дечјих елемената:

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

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

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

parent.insertBefore(p, parent.firstChild);

Резултат извршавања кода:

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

Погледајте такође

метод prepend,
који умеће елементе на почетак
метод appendChild,
који умеће елементе на крај родитеља
метод insertAdjacentElement,
који умеће елемент на задато место
метод insertAdjacentHTML,
који умеће тагове на задато место