# Метод 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`,
  который вставляет элементы перед элементом

← →
↑
en ru