Метод 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,
който вмъква елементи преди елемент