insertBefore metodi

insertBefore metodi elementni boshqa element oldiga joylash imkonini beradi. Ko‘pincha createElement yordamida element yaratilgandan keyin qo‘llaniladi. Metod qaysi element oldiga joylash amalga oshirilsa, o‘sha elementning ota-elementiga nisbatan qo‘llaniladi.

Sintaksis

ota.insertBefore(element, kimning oldiga joylash);

Misol

Paragraf yaratamiz va uni ikkinchi paragraf oldiga joylaymiz:

<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);

Kodni bajarish natijasi:

<div id="parent">
	<p>elem 1</p>
	<p>!</p>
	<p>elem 2</p>
	<p>elem 3</p>
</div>

Misol

#parent elementining boshiga paragraf qo‘shamiz. Buning uchun paragrafimizni #parent ning birinchi avlodi oldiga joylaymiz. Ushbu avlodni firstElementChild yordamida topish mumkin:

<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);

Kodni bajarish natijasi:

<div id="parent">
	<p>!</p>
	<p>elem 1</p>
	<p>elem 2</p>
</div>

Misol

Ikkinchi parametr sifatida null o‘tkazilganda, insertBefore metodi appendChild kabi ishlaydi. Shu bilan birga, agar elementda pastki elementlar bo‘lmasa, firstElementChild null qiymatini qaytaradi. Demak, element boshiga qo‘shish, hatto uning ichida pastki elementlar bo‘lmaganda ham amalga oshirilishi mumkin:

<div id="parent"></div>

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

Kodni bajarish natijasi:

<div id="parent">
	<p>!</p>
</div>

Shuningdek qarang

prepend metodi,
elementlarni boshiga joylaydi
appendChild metodi,
elementlarni ota-elementning oxiriga joylaydi
insertAdjacentElement metodi,
elementni belgilangan joyga joylaydi
insertAdjacentHTML metodi,
teglarni belgilangan joyga joylaydi