Метод insertAdjacentHTML позволяет вставить строку HTML кода в любое место страницы. Код вставляется относительно опорного элемента.

Можно сделать вставку перед опорным элементом (способ вставки beforeBegin), после него (способ вставки afterEnd), а также в начало (способ вставки afterBegin) или в конец (способ вставки beforeEnd) опорного элемента.

См. методы insertBefore и appendChild, которые также позволяют вставлять новые элементы.

Синтаксис

опорный элемент.insertAdjacentHTML(способ вставки, код для вставки);

Примеры

Пример . Способ beforeBegin

Пусть опорный элемент - это элемент #target. Вставим перед ним новый абзац:

<div id="target">
	<p>Абзац</p>
</div>
var target = document.getElementById('target');
target.insertAdjacentHTML('beforeBegin', '<p>Новый абзац</p>');

HTML код элемента станет выглядеть так:

<p>Новый абзац</p>
<div id="target">
	<p>Абзац</p>
</div>

Пример . Способ afterEnd

А теперь вставим новый абзац после опорного элемента:

<div id="target">
	<p>Абзац</p>
</div>
var target = document.getElementById('target');
target.insertAdjacentHTML('afterEnd', '<p>Новый абзац</p>');

HTML код элемента станет выглядеть так:

<div id="target">
	<p>Абзац</p>
</div>
<p>Новый абзац</p>

Пример . Способ afterBegin

Вставим новый абзац в начало опорного элемента:

<div id="target">
	<p>Абзац</p>
</div>
var target = document.getElementById('target');
target.insertAdjacentHTML('afterBegin', '<p>Новый абзац</p>');

HTML код элемента станет выглядеть так:

<div id="target">
	<p>Новый абзац</p>
	<p>Абзац</p>
</div>

Пример . Способ beforeEnd

Вставим новый абзац в конец опорного элемента:

<div id="target">
	<p>Абзац</p>
</div>
var target = document.getElementById('target');
target.insertAdjacentHTML('beforeEnd', '<p>Новый абзац</p>');

HTML код элемента станет выглядеть так:

<div id="target">
	<p>Абзац</p>
	<p>Новый абзац</p>
</div>