Element.insertAdjacentElement()

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

Синтаксис

targetElement.insertAdjacentElement(position, element);

Параметры

position
DOMString - определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):
  • 'beforebegin': до самого element (до открывающего тега).
  • 'afterbegin': сразу после открывающего тега  element (перед первым потомком).
  • 'beforeend': сразу перед закрывающим тегом element (после последнего потомка).
  • 'afterend': после element (после закрывающего тега).
element
Элемент, добавляемый в DOM-дерево.

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

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

Исключения

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

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

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
Примечаение: значения beforebegin и afterend работают только если targetElement находится в DOM-дереве и имеет родительский элемент.

Примеры

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().

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

Спецификация Статус Комментарий
DOM
Определение 'insertAdjacentElement()' в этой спецификации.
Живой стандарт

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
insertAdjacentElementChrome Полная поддержка 1Edge Полная поддержка 18
Полная поддержка 18
Полная поддержка 12
Замечания
Замечания This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Полная поддержка 48IE Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка 2.3Chrome Android Полная поддержка 18Firefox Android Полная поддержка 48Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

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