Метод insertAdjacentElement

Метод insertAdjacentElement омогућава уметање елемента на било које место на страници. Најчешће се користи након креирања елемента помоћу createElement. Код се умеће у односу на референтни елемент. Може се извршити уметање пре референтног елемента (начин уметања beforeBegin), после њега (начин уметања afterEnd), као и на почетак (начин уметања afterBegin) или на крај (начин уметања beforeEnd) референтног елемента.

Синтакса

javascriptреферентни елемент.insertAdjacentElement(начин уметања, код за уметање);

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

Нека је референтни елемент елемент #target. Убацимо нови пасус пре њега:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);

Резултат извршавања кода:

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

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

А сада убацимо нови пасус после референтног елемента:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);

Резултат извршавања кода:

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

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

Убацимо нови пасус на почетак референтног елемента:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);

Резултат извршавања кода:

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

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

Убацимо нови пасус на крај референтног елемента:

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

javascriptlet p = document.createElement('p');
p.textContent = '!';

let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);

Резултат извршавања кода:

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

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