Element.insertAdjacentElement()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Метод insertAdjacentElement() добавляет переданный элемент в DOM-дерево относительно элемента, вызвавшего метод.

Синтаксис

targetElement.insertAdjacentElement(position, element);

Параметры

position

DOMString - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):

  • 'beforebegin': перед самим элементом targetElement.
  • 'afterbegin': внутри элемента targetElement, перед его первым потомком.
  • 'beforeend': внутри элемента targetElement, после его последнего потомка.
  • 'afterend': после самого элемента targetElement.
element

Элемент, добавляемый в DOM-дерево.

Возвращаемое значение

Метод возвращает добавляемый элемент, либо null, если добавление элемента завершилось ошибкой.

Исключения

Исключение Пояснение
SyntaxError Переданное значение position не соответствует ни одному из допустимых.
TypeError Передаваемый element не является валидным.

Наглядное отображение параметра position

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

Примечание: Значения beforebegin и afterend работают только если targetElement находится в DOM-дереве и имеет родительский элемент.

Примеры

js
beforeBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("beforebegin", tempDiv);
  }
  setListener(tempDiv);
});

afterBtn.addEventListener("click", function () {
  var tempDiv = document.createElement("div");
  tempDiv.style.backgroundColor = randomColor();
  if (activeElem) {
    activeElem.insertAdjacentElement("afterend", tempDiv);
  }
  setListener(tempDiv);
});

Посмотрите наше демо insertAdjacentElement.html на Github (так же посмотрите исходный код). В этом демо мы имеем последовательность <div> элементов внутри контейнера. При выборе одного из них можно нажать кнопку Insert before или Insert after и добавить новые div до или после выбранного элемента используя метод insertAdjacentElement().

Спецификации

Specification
DOM
# dom-element-insertadjacentelement

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
insertAdjacentElement

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

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