Element.insertAdjacentHTML()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨апрель 2018 г.⁩.

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>one</div>var d1 = document.getElementById("one");d1.insertAdjacentHTML("afterend", '<div>two</div>');// At this point, the new structure is:// <div>one</div><div>two</div>

Примечания

Соображения безопасности

Будьте осторожны при использовании вставки HTML на страницу с помощьюinsertAdjacentHTML(), не используете пользовательский ввод, который не был экранирован.

Не рекомендуется использоватьinsertAdjacentHTML(), когда требуется ввести простой текст. Используйте для этого свойствоNode.textContent или методElement.insertAdjacentText(). Они не будут интерпретировать текст как HTML, а вставят необработанный текст.