Kaedah insertAdjacentHTML

Kaedah insertAdjacentHTML membolehkan penyisipan rentetan kod HTML di mana-mana tempat pada halaman. Kod disisipkan relatif kepada elemen rujukan. Boleh dilakukan penyisipan sebelum elemen rujukan (kaedah penyisipan 'beforeBegin'), selepasnya (kaedah penyisipan 'afterEnd'), serta pada permulaan (kaedah penyisipan 'afterBegin') atau pada penghujung (kaedah penyisipan 'beforeEnd') elemen rujukan.

Sintaks

elemen rujukan.insertAdjacentHTML(kaedah penyisipan, kod untuk disisip);

Contoh . Kaedah beforeBegin

Katakan elemen rujukan ialah elemen #target. Mari sisipkan perenggan baru sebelumnya:

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

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

Keputusan pelaksanaan kod:

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

Contoh . Kaedah afterEnd

Sekarang mari sisipkan perenggan baru selepas elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Contoh . Kaedah afterBegin

Mari sisipkan perenggan baru pada permulaan elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Contoh . Kaedah beforeEnd

Mari sisipkan perenggan baru pada penghujung elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Lihat juga

kaedah insertAdjacentText,
yang menyisip teks di tempat yang ditentukan
kaedah insertAdjacentElement,
yang menyisip elemen di tempat yang ditentukan
kaedah prepend,
yang menyisip elemen pada permulaan
kaedah append,
yang menyisip elemen pada penghujung
kaedah appendChild,
yang menyisip elemen pada penghujung induk
kaedah insertBefore,
yang menyisip elemen sebelum elemen