# Метод insertAdjacentElement

Метод `insertAdjacentElement` позволяет вставить элемент в любое место страницы. Чаще всего используется после создания элемента с помощью `createElement`. Код вставляется относительно опорного элемента. Можно сделать вставку перед опорным элементом (способ вставки `beforeBegin`), после него (способ вставки `afterEnd`), а также в начало (способ вставки `afterBegin`) или в конец (способ вставки `beforeEnd`) опорного элемента.

## Синтаксис

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

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

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

`<div id="target"> <p>elem</p> </div>` `let p = document.createElement('p'); p.textContent = '!'; let target = document.querySelector('#target'); target.insertAdjacentElement('beforeBegin', p);`

Результат выполнения кода:

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

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

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

`<div id="target"> <p>elem</p> </div>` `let p = document.createElement('p'); p.textContent = '!'; let target = document.querySelector('#target'); target.insertAdjacentElement('afterEnd', p);`

Результат выполнения кода:

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

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

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

`<div id="target"> <p>elem</p> </div>` `let p = document.createElement('p'); p.textContent = '!'; let target = document.querySelector('#target'); target.insertAdjacentElement('afterBegin', p);`

Результат выполнения кода:

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

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

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

`<div id="target"> <p>elem</p> </div>` `let p = document.createElement('p'); p.textContent = '!'; let target = document.querySelector('#target'); target.insertAdjacentElement('beforeEnd', p);`

Результат выполнения кода:

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

## Смотрите также

- метод `insertAdjacentHTML`,
  который вставляет теги в заданное место
- метод `insertAdjacentText`,
  который вставляет текст в заданное место
- метод `prepend`,
  который вставляет элементы в начало
- метод `append`,
  который вставляет элементы в конец
- метод `appendChild`,
  который вставляет элементы в конец родителя
- метод `insertBefore`,
  который вставляет элементы перед элементом

← →
↑
en ru