insertBefore Metodu

insertBefore metodu, bir öğeyi başka bir öğeden önce eklemeye izin verir. Çoğunlukla createElement ile bir öğe oluşturulduktan sonra kullanılır. Metot, eklemenin yapılacağı öğenin ebeveynine uygulanır.

Sözdizimi

javascriptebeveyn.insertBefore(öğe, nerenin önüne eklenecek);

Örnek

Bir paragraf oluşturalım ve onu ikinci paragrafın önüne yerleştirelim:

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 çalıştırılmasının sonucu:

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

Örnek

#parent elemanının başına bir paragraf ekleyelim. Bunun için paragrafımızı #parent'ın ilk çocuğundan önce ekleyeceğiz. Bu çocuk firstElementChild kullanılarak bulunabilir:

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 çalıştırılmasının sonucu:

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

Örnek

İkinci parametre olarak null iletildiğinde, insertBefore metodu appendChild gibi çalışır. Aynı zamanda, eğer elemanın alt elemanı yoksa, firstElementChild null döndürür. Sonuç olarak, elemanın başına ekleme yapmak, hiç alt elemanı olmasa bile mümkündür:

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

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

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

parent.insertBefore(p, parent.firstChild);

Kodun çalıştırılmasının sonucu:

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

Ayrıca Bakınız