Метод 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 методи,
тегларни белгиланган жойга киритади