Element.insertAdjacentHTML()

insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предовращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с innerHTML.

Синтаксис

targetElement.insertAdjacentHTML(position, text);

Параметры

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

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

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

Пример

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

Примечания

Соображения безопасности

Будте осторожны при использовании вставки HTML на страницу с помощью insertAdjacentHTML(), не используете пользовательский ввод, который не был экранирован.

Не рекомендуется использовать insertAdjacentHTML(), когда требуется ввести простой текст. Используйте для этого свойство Node.textContent или метод Element.insertAdjacentText(). Они не будут интерпретировать текст как HTML, а вставят необработанный текст.

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

Спецификация Статус Комментарий
DOM Parsing and Serialization
Определение 'Element.insertAdjacentHTML()' в этой спецификации.
Рабочий черновик

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
insertAdjacentHTMLChrome Полная поддержка 1Edge Полная поддержка 18
Полная поддержка 18
Полная поддержка 12
Замечания
Замечания This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Firefox Полная поддержка 8IE Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания Before Internet Explorer 10, throws an "Invalid target element for this operation." error when called on a <table>, <tbody>, <thead>, or <tr> element.
Замечания This function is implemented in the HTMLElement API, meaning non-HTML elements (like SVG elements) cannot use this function.
Opera Полная поддержка 7Safari Полная поддержка 10WebView Android Полная поддержка 2.3Chrome Android Полная поддержка 18Firefox Android Полная поддержка 8Opera Android Полная поддержка ДаSafari iOS Полная поддержка 4Samsung Internet Android Полная поддержка Да

Легенда

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

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

hacks.mozilla.org guest post by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.