Метод 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>

Вижте също