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

Глядзіце таксама