insertBefore metodu

insertBefore metodi bir elementi beýlekisinden ozal goýmaga mümkinçilik berýär. Kop halatlarda createElement kömegi bilen element döredilenden soň ulanylýar. Metod goýberilýän elementiň öňüne ýerleşdirilýän elementiň ene-atasyna ugradylýar.

Sintaksis

ene-ata.insertBefore(element, kimden ozal goýmak);

Mysal

Abzas dörediň we ony ikinji abzasyndan ozal ýerleşdiriň:

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

Kodyň ýerine ýetiriliş netijesi:

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

Mysal

#parent elementiň başyna abzas goşalyň. Bunun üçin abzasymyzy #parent elementiň ilkinji çagasynyň öňüne goýarys. Bu çagany firstElementChild kömegi bilen tapyp bolar:

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

Kodyň ýerine ýetiriliş netijesi:

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

Mysal

null ikinji parametr hökmünde berilende, insertBefore metodi appendChild ýaly işleýär. Şol bir wagtyň özünde, elementde çaga elementler bolmasa, firstElementChild null gaýtarýar. Netijede, elementde hiç hili çaga elementler bolmadyk wagtynda-da onuň başyna goşup bolýar:

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

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

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

parent.insertBefore(p, parent.firstChild);

Kodyň ýerine ýetiriliş netijesi:

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

Şeýle-de garaňyz

elementleri başa goýýan metot prepend,
elementleri ene-atanyň ahyryna goýýan metot appendChild,
elementi kesgitlenen ýere goýýan metot insertAdjacentElement,
tegleri kesgitlenen ýere goýýan metot insertAdjacentHTML,