Метад 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>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,
які ўстаўляе тэгі ў зададзенае месца