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

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

Mysal

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

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

Kodyň ýerine ýetiriliş netijesi:

html<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:

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

Kodyň ýerine ýetiriliş netijesi:

html<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:

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

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

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

parent.insertBefore(p, parent.firstChild);

Kodyň ýerine ýetiriliş netijesi:

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

Şeýle-de garaňyz