insertAdjacentHTML Metodu

insertAdjacentHTML metodu bir HTML kod dizesini sayfada herhangi bir yere eklemeye izin verir. Kod referans öğesine göre eklenir. Referans öğesinden önce ekleme yapılabilir ('beforeBegin' ekleme yöntemi), ondan sonra ('afterEnd' ekleme yöntemi), ayrıca referans öğesinin başına ('afterBegin' ekleme yöntemi) veya sonuna ('beforeEnd' ekleme yöntemi) ekleme yapılabilir.

Sözdizimi

javascriptreferans öğesi.insertAdjacentHTML(ekleme yöntemi, eklenecek kod);

Örnek . beforeBegin Yöntemi

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

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

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

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

Örnek . afterEnd Yöntemi

Şimdi referans öğesinden sonra yeni bir paragraf ekleyelim:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

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

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

Örnek . afterBegin Yöntemi

Referans öğesinin başına yeni bir paragraf ekleyelim:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

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

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

Örnek . beforeEnd Yöntemi

Referans öğesinin sonuna yeni bir paragraf ekleyelim:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

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

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

Ayrıca Bakınız