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 әдісі,
тегтерді көрсетілген орынға кірістіреді