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>

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

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

См. также

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