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

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

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

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

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

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

Örnek . afterEnd Yöntemi

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

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

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

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

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

Örnek . afterBegin Yöntemi

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

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

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

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

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

Örnek . beforeEnd Yöntemi

Referans öğesinin sonuna yeni bir paragraf ekleyelim:

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

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

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

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

Ayrıca Bakınız

metod insertAdjacentText,
belirtilen yere metin ekler
metod insertAdjacentElement,
belirtilen yere öğe ekler
metod prepend,
öğeleri başa ekler
metod append,
öğeleri sona ekler
metod appendChild,
öğeleri ebeveynin sonuna ekler
metod insertBefore,
öğeleri bir öğeden önce ekler