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

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

Contoh . Kaedah beforeBegin

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

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

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

Keputusan pelaksanaan kod:

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

Contoh . Kaedah afterEnd

Sekarang mari sisipkan perenggan baru selepas elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Contoh . Kaedah afterBegin

Mari sisipkan perenggan baru pada permulaan elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Contoh . Kaedah beforeEnd

Mari sisipkan perenggan baru pada penghujung elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Lihat juga