Метод insertAdjacentHTML

Методът insertAdjacentHTML позволява да се вмъкне низ от HTML код на всяко място в страницата. Кодът се вмъква спрямо опорен елемент. Може да се направи вмъкване преди опорния елемент (начин на вмъкване 'beforeBegin'), след него (начин на вмъкване 'afterEnd'), както и в началото (начин на вмъкване 'afterBegin') или в края (начин на вмъкване 'beforeEnd') на опорния елемент.

Синтаксис

javascriptопорен елемент.insertAdjacentHTML(начин на вмъкване, код за вмъкване);

Пример . Начин beforeBegin

Нека опорният елемент е елементът #target. Нека вмъкнем преди него нов параграф:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Резултат от изпълнението на кода:

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

Пример . Начин afterEnd

А сега нека вмъкнем нов параграф след опорния елемент:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

Резултат от изпълнението на кода:

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

Пример . Начин afterBegin

Нека вмъкнем нов параграф в началото на опорния елемент:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

Резултат от изпълнението на кода:

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

Пример . Начин beforeEnd

Нека вмъкнем нов параграф в края на опорния елемент:

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

javascriptlet target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Резултат от изпълнението на кода:

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

Вижте също