Методи insertAdjacentText

Методи insertAdjacentText имкон медиҳад, ки сатр ба ҳар як ҷои саҳифа ворид карда шавад. Сатр нисбат ба унсури асосӣ ворид карда мешавад. Мумкин аст ворид карданро пеш аз унсури асосӣ (усули воридкунӣ 'beforeBegin'), баъд аз он (усули воридкунӣ 'afterEnd'), инчунин ба аввал (усули воридкунӣ 'afterBegin') ё ба охир (усули воридкунӣ 'beforeEnd') унсури асосӣ анҷом дод.

Синтаксис

javascriptунсури асосӣ.insertAdjacentText(усули воридкунӣ, матн барои воридкунӣ);

Намуна . Усули beforeBegin

Бигзор унсури асосӣ - ин унсури #target бошад. Пеш аз он кадоме матнро ворид мекунем:

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

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

Натиҷаи иҷрои код:

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

Намуна . Усули afterEnd

Акнун абзаци наверо баъд аз унсури асосӣ ворид мекунем:

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

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

Натиҷаи иҷрои код:

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

Намуна . afterBegin

Абзаци наверо ба аввали унсури асосӣ ворид мекунем:

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

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

Натиҷаи иҷрои код:

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

Намуна . Усули beforeEnd

Абзаци наверо ба охири унсури асосӣ ворид мекунем:

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

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

Натиҷаи иҷрои код:

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

Ҳамчунин бубинед