Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Element.insertAdjacentHTML()

Описание

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

Синтаксис

element.insertAdjacentHTML(position, text);

position указывает положение element, и может принимать одно из следующих значений:

'beforebegin'
Перед element .
'afterbegin'
Внутри element, перед первым дочерним элементом (потомком).
'beforeend'
Внутри element, после последнего дочернего элемента.
'afterend'
После element.

text строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.

Позиции визуально

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->
Note: The beforebegin and afterend positions work only if the node is in a tree and has an element parent.

Пример

// <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>

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 8.0 (8.0) 4.0 7.0 4.0 (527)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 8.0 (8.0) ? ? ?

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

Specification Status Comment
DOM Parsing and Serialization
Определение 'Element.insertAdjacentHTML()' в этой спецификации.
Живой стандарт  

См. также

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

Метки документа и участники

 Внесли вклад в эту страницу: mms27, fscholz, khalid32, BaNru
 Обновлялась последний раз: mms27,