Metode insertAdjacentText

Metode insertAdjacentText memungkinkan untuk menyisipkan string di mana saja pada halaman. String disisipkan relatif terhadap elemen acuan. Dapat dilakukan penyisipan sebelum elemen acuan (cara penyisipan 'beforeBegin'), setelahnya (cara penyisipan 'afterEnd'), serta di awal (cara penyisipan 'afterBegin') atau di akhir (cara penyisipan 'beforeEnd') elemen acuan.

Sintaks

javascriptelemen acuan.insertAdjacentText(cara penyisipan, teks untuk disisipkan);

Contoh . Cara beforeBegin

Misalkan elemen acuan adalah elemen #target. Mari kita sisipkan teks apa pun di depannya:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeBegin', 'text');

Hasil eksekusi kode:

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

Contoh . Cara afterEnd

Sekarang mari kita sisipkan paragraf baru setelah elemen acuan:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterEnd', 'text');

Hasil eksekusi kode:

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

Contoh . afterBegin

Mari kita sisipkan paragraf baru di awal elemen acuan:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('afterBegin', 'text');

Hasil eksekusi kode:

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

Contoh . Cara beforeEnd

Mari kita sisipkan paragraf baru di akhir elemen acuan:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentText('beforeEnd', 'text');

Hasil eksekusi kode:

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

Lihat juga