Метод insertAdjacentHTML

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

Синтакса

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

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

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

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

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

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

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

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

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

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

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

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

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

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

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

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

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

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

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

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

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

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

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

метод insertAdjacentText,
који умеће текст на задато место
метод insertAdjacentElement,
који умеће елемент на задато место
метод prepend,
који умеће елементе на почетак
метод append,
који умеће елементе на крај
метод appendChild,
који умеће елементе на крај родитеља
метод insertBefore,
који умеће елементе пре елемента