Описание
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 -->
Примечание: позиции
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>
Поддержка браузерами
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!
| 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()' в этой спецификации. |
Рабочий черновик |