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

javascriptreferans öğ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:

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

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

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

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

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

Örnek . afterEnd Yöntemi

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

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

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

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

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

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

Örnek . afterBegin Yöntemi

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

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

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

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

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

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

Örnek . beforeEnd Yöntemi

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

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

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

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

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

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

Ayrıca Bakınız