Mbinu ya insertAdjacentText

Mbinu insertAdjacentText inaruhusu kuingiza mfuatano wa herufi mahali popote kwenye ukurasa. Mfuatano wa herufi unaingizwa jamaa na kipengele cha msingi. Inawezekana kufanya uingizaji kabla ya kipengele cha msingi (njia ya uingizaji 'beforeBegin'), baada yake (njia ya uingizaji 'afterEnd'), na pia mwanzoni (njia ya uingizaji 'afterBegin') au mwishoni (njia ya uingizaji 'beforeEnd') kipengele cha msingi.

Syntaxi

javascriptkipengele cha msingi.insertAdjacentText(njia ya uingizaji, maandishi ya kuingiza);

Mfano . Njia beforeBegin

Wacha kipengele cha msingi kiwe kipengele #target. Tuingize maandishi mbele yake:

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

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

Matokeo ya kutekeleza kodi:

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

Mfano . Njia afterEnd

Sasa tuingize aya mpya baada ya kipengele cha msingi :

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

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

Matokeo ya kutekeleza kodi:

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

Mfano . afterBegin

Wacha tuingize aya mpya mwanzoni mwa kipengele cha msingi:

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

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

Matokeo ya kutekeleza kodi:

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

Mfano . Njia beforeEnd

Wacha tuingize aya mpya mwishoni mwa kipengele cha msingi:

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

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

Matokeo ya kutekeleza kodi:

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

Angalia pia