insertBefore metodu

insertBefore metodu bir elementi digər elementdən əvvəl əlavə etməyə imkan verir. Ən çox createElement ilə element yaradıldıqdan sonra istifadə olunur. Metod, əlavə ediləcək elementin əvvəlindəki valideynə tətbiq olunur.

Sintaksis

valideyn.insertBefore(element, harada əlavə etmək);

Nümunə

Abzas yaradaq və onu ikinci abzasadan əvvəl yerləşdirək:

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

Kodun icrasının nəticəsi:

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

Nümunə

#parent elementinin əvvəlinə abzas əlavə edək. Bunun üçün abzasımızı #parent-nin ilk uşağından əvvəl əlavə edəcəyik. Bu uşaq firstElementChild ilə tapıla bilər:

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

Kodun icrasının nəticəsi:

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

Nümunə

İkinci parametr kimi null ötürüldükdə, insertBefore metodu appendChild kimi işləyir. Eyni zamanda, əgər elementdə uşaq elementlər yoxdursa, firstElementChild null qaytarır. Nəticədə, elementin əvvəlinə heç bir uşaq elementi olmadıqda belə əlavə etmək olar:

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

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

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

parent.insertBefore(p, parent.firstChild);

Kodun icrasının nəticəsi:

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

Həmçinin baxın

metod prepend,
elementləri əvvələ əlavə edir
metod appendChild,
elementləri valideynin sonuna əlavə edir
metod insertAdjacentElement,
elementi müəyyən edilmiş yerə əlavə edir
metod insertAdjacentHTML,
teqləri müəyyən edilmiş yerə əlavə edir