Методот 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,
кој вметнува тагови на зададено место