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

Пример

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

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

См. также

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