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

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

Örnek

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

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

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

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

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

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

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

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

parent.insertBefore(p, parent.firstChild);

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

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

Ayrıca Bakınız

metod prepend,
elemanları başa ekler
metod appendChild,
elemanları ebeveynin sonuna ekler
metod insertAdjacentElement,
bir öğeyi belirtilen yere ekler
metod insertAdjacentHTML,
etiketleri belirtilen yere ekler