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

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

Nümunə

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

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

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

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

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

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

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

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

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

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

parent.insertBefore(p, parent.firstChild);

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

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

Həmçinin baxın