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

Погледајте такође