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 Standard
# dom-element-insertadjacentelement

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

BCD tables only load in the browser

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