Метод 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,
който вмъква тагове на зададено място