Метод HTML DOM Element insertAdjacentElement()

Определение и использование

insertAdjacentElement() Метод вставляет элемент в указанное положение.

Допустимые значения положения:

Значение Описание
afterbegin После начала элемента (первый подэлемент).
afterend За элементом.
beforebegin Перед элементом.
beforeend Прежде чем элемент завершится (последний подэлемент).

Пример

Пример 1

Вставить span элемент после заголовка:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);

Попробуйте сами

Пример 2

Использование "afterbegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);

Попробуйте сами

Пример 3

Использование "beforebegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);

Попробуйте сами

Пример 4

Использование "beforeend":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);

Попробуйте сами

Синтаксис

element.insertAdjacentElement(position, element)

или

node.insertAdjacentElement(position, element)

Параметры

Параметры Описание
position

Обязателен. Положение относительно элемента:

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
element Элемент, который нужно вставить.

Поддержка браузера

Все браузеры поддерживают element.insertAdjacentElement()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка Поддержка