Metode insertAdjacentHTML

Metode insertAdjacentHTML memungkinkan untuk memasukkan string kode HTML ke mana saja di halaman. Kode dimasukkan relatif terhadap elemen referensi. Dapat dilakukan penyisipan sebelum elemen referensi (metode penyisipan 'beforeBegin'), setelahnya (metode penyisipan 'afterEnd'), serta di awal (metode penyisipan 'afterBegin') atau di akhir (metode penyisipan 'beforeEnd') elemen referensi.

Sintaks

elemen referensi.insertAdjacentHTML(metode penyisipan, kode untuk disisipkan);

Contoh . Metode beforeBegin

Misalkan elemen referensi adalah elemen #target. Mari kita sisipkan paragraf baru di depannya:

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

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

Hasil eksekusi kode:

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

Contoh . Metode afterEnd

Sekarang mari kita sisipkan paragraf baru setelah elemen referensi:

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

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

Hasil eksekusi kode:

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

Contoh . Metode afterBegin

Mari kita sisipkan paragraf baru di awal elemen referensi:

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

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

Hasil eksekusi kode:

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

Contoh . Metode beforeEnd

Mari kita sisipkan paragraf baru di akhir elemen referensi:

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

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

Hasil eksekusi kode:

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

Lihat juga

metode insertAdjacentText,
yang menyisipkan teks di tempat yang ditentukan
metode insertAdjacentElement,
yang menyisipkan elemen di tempat yang ditentukan
metode prepend,
yang menyisipkan elemen di awal
metode append,
yang menyisipkan elemen di akhir
metode appendChild,
yang menyisipkan elemen di akhir induk
metode insertBefore,
yang menyisipkan elemen sebelum elemen tertentu