JavaScript метод Element.insertAdjacentHTML()

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

JavaScript метод insertAdjacentHTML() объекта Element производит анализ указанного текста как HTML или XML, и вставляет полученные узлы в дерево DOM в указанной позиции.

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

При вставке HTML на страницу с помощью insertAdjacentHTML(), будьте осторожны, чтобы не использовать пользовательский ввод, который не был экранирован. Не рекомендуется использовать метод insertAdjacentHTML() при вставке обычного текста, вместо этого используйте свойство textContent, или метод insertAdjacentText(), в этом случае, передаваемое содержимое не будет интерпретировано как HTML, а будет вставлено как необработанный текст.

Непроверенный пользовательский HTML может содержать обработчики событий и другие активные конструкции и привести к XSS. При обязательном применении Trusted Types строка без подходящей политики может вызвать TypeError.

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

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

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

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

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

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

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
insertAdjacentHTML	✓1	✓17…	✓8	✓8	✓4	✓18	✓8	✓10.1	✓4	✓1.0	✓4.4	✓4
Requires TrustedHTML instance when trusted types are enforced	✓83	✓83	✓148	✓69	✓26	✓83	✓148	✓59	✓26	✓13.0	✓83	✓26

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

JavaScript синтаксис

targetElement.insertAdjacentHTML(position, text);

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

HTML Standard.

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

Исключения

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

Вставка HTML-строки в начало и конец списка

Нажмите ▶, затем кнопки в результате: каждый клик разбирает строку и создаёт новый пункт 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')
const li = '<li>My element</li>'

function insertAfterBegin() {
    ul.insertAdjacentHTML('afterbegin', li)
}
function insertBeforeEnd() {
    ul.insertAdjacentHTML('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>) мы вызываем функцию, которая с помощью метода insertAdjacentHTML() вставляет HTML строку внутрь элемента <ul> перед его первым дочерним элементом, или после его последнего дочернего элемента.

Обратите внимание, что мы предварительно с использованием метода querySelector() выбираем первый элемент <ul> в документе и инициализируем этим значением переменную. Кроме того, мы инициализируем переменную, которая содержит HTML строку.