Усули 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>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,
ки тегҳоро дар ҷои муайяншуда мегузоранд