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

javascriptota.insertBefore(element, kimning oldiga joylash);

Misol

Paragraf yaratamiz va uni ikkinchi paragraf oldiga joylaymiz:

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

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

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

parent.insertBefore(p, before);

Kodni bajarish natijasi:

html<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:

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

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

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

parent.insertBefore(p, parent.firstElementChild);

Kodni bajarish natijasi:

html<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:

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

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

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

parent.insertBefore(p, parent.firstChild);

Kodni bajarish natijasi:

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

Shuningdek qarang