Метод insertAdjacentElement
Метод insertAdjacentElement омогућава
уметање елемента на било које место на страници.
Најчешће се користи након креирања елемента
помоћу createElement.
Код се умеће у односу на референтни
елемент. Може се извршити уметање пре
референтног елемента (начин уметања beforeBegin),
после њега (начин уметања afterEnd),
као и на почетак (начин уметања afterBegin)
или на крај (начин уметања beforeEnd)
референтног елемента.
Синтакса
референтни елемент.insertAdjacentElement(начин уметања, код за уметање);
Пример . Начин beforeBegin
Нека је референтни елемент елемент #target.
Убацимо нови пасус пре њега:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Резултат извршавања кода:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Пример . Начин afterEnd
А сада убацимо нови пасус после референтног елемента:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Резултат извршавања кода:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Пример . Начин afterBegin
Убацимо нови пасус на почетак референтног елемента:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Резултат извршавања кода:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Пример . Начин beforeEnd
Убацимо нови пасус на крај референтног елемента:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Резултат извршавања кода:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Погледајте такође
-
метод
insertAdjacentHTML,
који умеће HTML у задато место -
метод
insertAdjacentText,
који умеће текст у задато место -
метод
prepend,
који умеће елементе на почетак -
метод
append,
који умеће елементе на крај -
метод
appendChild,
који умеће елементе на крај родитеља -
метод
insertBefore,
који умеће елементе пре елемента
