Метад 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,
які ўстаўляе элементы перад элементам