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

Погледни исто така