Метод insertBefore

insertBefore методи элементни бошка элемент олдига киритиш имконини беради. Кўпинча createElement ёрдамида элемент яратилгандан сўнг қўлланилади. Метод қайси элемент олдига киритилса, ўша элементни ота-онасига нисбатан қўлланилади.

Синтаксис

javascriptотаона.insertBefore(элемент, кимнинг олдига киритиш);

Мисол

Абзац яратиб, уни иккинчи абзац олдига жойлаштирамиз:

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

Кодни ишга тушириш натижаси:

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

Мисол

#parent элементининг бошланишига абзац қўшамиз. Бунинг учун абзацамизни #parent нинг биринчи фарзанди олдига киритамиз. Ушбу фарзандни firstElementChild ёрдамида топиш мумкин:

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

Кодни ишга тушириш натижаси:

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

Мисол

Иккинчи параметр сифатида null узатилганда, insertBefore методи appendChild каби ишлаяди. Шу билан бирга, агар элементда фарзанд элементлар бўлмаса, firstElementChild null қайтаради. Демак, элементнинг бошланишига қўшиш унинг фарзанд элементлари бўлмаганда ҳам амалга оширилиши мумкин:

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

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

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

parent.insertBefore(p, parent.firstChild);

Кодни ишга тушириш натижаси:

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

Қараб чикинг