Element.insertAdjacentHTML()
insertAdjacentHTML()
разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию. Данная функция не переписывает имеющиеся элементы, что предотвращает дополнительную сериализацию и поэтому работает быстрее, чем манипуляции с innerHTML
.
Синтаксис
targetElement.insertAdjacentHTML(position, text);
Параметры
position
-
DOMString
- определяет позицию добавляемого элемента относительно элемента, вызвавшего метод. Должно соответствовать одному из следующих значений (чувствительно к регистру):'beforebegin'
: до самогоelement
(до открывающего тега).'afterbegin'
: сразу после открывающего тегаelement
(перед первым потомком).'beforeend'
: сразу перед закрывающим тегомelement
(после последнего потомка).'afterend'
: послеelement
(после закрывающего тега).
text
-
Строка, которая будет проанализирована как 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, а вставят необработанный текст.
Спецификации
Specification |
---|
HTML Standard # the-insertadjacenthtml()-method |
Совместимость с браузерами
BCD tables only load in the browser