insertBefore методу

insertBefore методу элементти башка элементтин алдына киргизүүгө мүмкүндүк берет. Көбүнчө createElement жардамы менен элемент жараткандан кийин колдонулат. Метод киргизиле турган элементтин алдындагы элементтин ата-энесине карата колдонулат.

Синтаксис

ата-эне.insertBefore(элемент, кимдин алдына киргизүү керек);

Мисал

Абзац жаратып, аны экинчи абзацтын алдына коёлу:

<div id="parent">
	<p>элем 1</p>
	<p id="before">элем 2</p>
	<p>элем 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>элем 1</p>
	<p>!</p>
	<p>элем 2</p>
	<p>элем 3</p>
</div>

Мисал

#parent элементинин башына абзац кошолу. Бул үчүн абзацыбызды #parent'тин биринчи уулунун алдына киргизебиз. Бул уулду firstElementChild жардамы менен табууга болот:

<div id="parent">
	<p>элем 1</p>
	<p>элем 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>элем 1</p>
	<p>элем 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 методу,
ал тегдерди белгиленген жерге киргизет