JavaScript метод Element.insertAdjacentElement()

Определение и применение

JavaScript метод insertAdjacentElement() объекта Element позволяет вставить указанный узел элемента в заданную позицию относительно элемента, на котором он вызывается.

Схематичное отображение работы метода insertAdjacentElement() отображено на следующем изображении:

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

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2018 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Element.insertAdjacentElement

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
insertAdjacentElement	✓1	✓17…	✓48	✓8	✓3	✓18	✓48	✓10.1	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

const insertedElement = targetElement.insertAdjacentElement(position, element);

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

DOM Standard.

Значения параметров

Метод возвращает вставленный элемент или null, если вставка не выполнена (например, при позиции "beforebegin" у элемента без родителя).

Исключения

Пример использования

Перемещение одного элемента в начало и конец списка

Нажмите ▶, затем кнопки в результате: элемент My element появляется в начале или в конце списка. Он перемещается, а не копируется, потому что вставляется один и тот же созданный узел.

index.html

HTML

<button data-migration-click-0="">Insert with afterbegin position</button>
<button data-migration-click-2="">Insert with beforeend position</button>
<ul>
  <li>Элемент списка</li>
</ul>

main.js

JavaScript

const ul = document.querySelector('ul')
let li = document.createElement('li')
const textNode = document.createTextNode('My element')
li.appendChild(textNode)

function insertAfterBegin() {
    ul.insertAdjacentElement('afterbegin', li)
}
function insertBeforeEnd() {
    ul.insertAdjacentElement('beforeend', li)
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    insertAfterBegin()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')
document.querySelector('[data-migration-click-2]').addEventListener('click', function () {
    insertBeforeEnd()
})
document.querySelector('[data-migration-click-2]').removeAttribute('data-migration-click-2')

В этом примере с использованием метода addEventListener() при нажатии на определенную кнопку (HTML элемент <button>) мы вызываем функцию, которая с помощью метода insertAdjacentElement() вставляет элемент <li> внутри элемента <ul> перед его первым дочерним элементом, или после его последнего дочернего элемента.

Обратите внимание, что мы предварительно с использованием метода querySelector() выбираем первый элемент <ul> в документе и инициализируем этим значением переменную. После этого с использованием метода createElement() создаем новый элемент (пустой узел Element) с указанным именем тега <li>, с использованием метода createTextNode() создаем текстовый узел с указанным текстом и с использованием метода appendChild() помещаем его в этот элемент.