Kaedah insertAdjacentText

Kaedah insertAdjacentText membolehkan satu rentetan dimasukkan di mana-mana tempat pada halaman. Rentetan itu dimasukkan relatif kepada elemen rujukan. Boleh dilakukan pemasangan sebelum elemen rujukan (kaedah pemasangan 'beforeBegin'), selepas ia (kaedah pemasangan 'afterEnd'), dan juga pada permulaan (kaedah pemasangan 'afterBegin') atau pada penghujung (kaedah pemasangan 'beforeEnd') elemen rujukan.

Sintaks

javascriptelemen rujukan.insertAdjacentText(kaedah pemasangan, teks untuk dimasukkan);

Contoh . Kaedah beforeBegin

Katakan elemen rujukan - ialah elemen #target. Mari masukkan sebelum ia sebarang teks:

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

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

Keputusan pelaksanaan kod:

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

Contoh . Kaedah afterEnd

Sekarang mari masukkan perenggan baru selepas elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Contoh . afterBegin

Mari masukkan perenggan baru pada permulaan elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Contoh . Kaedah beforeEnd

Mari masukkan perenggan baru pada penghujung elemen rujukan:

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

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

Keputusan pelaksanaan kod:

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

Lihat juga