insertAdjacentElement Metodu

insertAdjacentElement metodu bir öğeyi sayfada herhangi bir yere eklemeye izin verir. En yaygın olarak createElement ile bir öğe oluşturulduktan sonra kullanılır. Kod, referans alınan öğeye göre eklenir. Referans alınan öğeden önce ekleme yapılabilir (beforeBegin ekleme yöntemi), ondan sonra ekleme yapılabilir (afterEnd ekleme yöntemi), ayrıca referans alınan öğenin başına (afterBegin ekleme yöntemi) veya sonuna (beforeEnd ekleme yöntemi) ekleme yapılabilir.

Sözdizimi

referans öğesi.insertAdjacentElement(ekleme yöntemi, eklenecek kod);

Örnek . `beforeBegin` Yöntemi

Referans alınan öğenin #target öğesi olduğunu varsayalım. Ondan önce yeni bir paragraf ekleyelim:

<div id="target">
	<p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

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

<p>!</p>
<div id="target">
	<p>elem</p>
</div>

Örnek . `afterEnd` Yöntemi

Şimdi ise yeni bir paragrafı referans alınan öğeden sonra ekleyelim:

<div id="target">
	<p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

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

<div id="target">
	<p>elem</p>
</div>
<p>!</p>

Örnek . `afterBegin` Yöntemi

Yeni bir paragrafı referans alınan öğenin başına ekleyelim:

<div id="target">
	<p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

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

<div id="target">
	<p>!</p>
	<p>elem</p>
</div>

Örnek . `beforeEnd` Yöntemi

Yeni bir paragrafı referans alınan öğenin sonuna ekleyelim:

<div id="target">
	<p>elem</p>
</div>

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

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

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

<div id="target">
	<p>elem</p>
	<p>!</p>
</div>

Ayrıca Bakınız

insertAdjacentHTML metodu,
etiketleri belirtilen yere ekler
insertAdjacentText metodu,
metni belirtilen yere ekler
prepend metodu,
öğeleri başa ekler
append metodu,
öğeleri sona ekler
appendChild metodu,
öğeleri ebeveynin sonuna ekler
insertBefore metodu,
öğeleri bir öğeden önce ekler

insertAdjacentElement Metodu

Sözdizimi

Örnek . beforeBegin Yöntemi

Örnek . afterEnd Yöntemi

Örnek . afterBegin Yöntemi

Örnek . beforeEnd Yöntemi

Ayrıca Bakınız

Örnek . `beforeBegin` Yöntemi

Örnek . `afterEnd` Yöntemi

Örnek . `afterBegin` Yöntemi

Örnek . `beforeEnd` Yöntemi