Элемент: метод insertAdjacentHTML()

Метод insertAdjacentHTML() интерфейса Element анализирует указанный текст как HTML или XML и вставляет полученные узлы в дерево DOM в указанной позиции.

position

Строка, представляющая позицию относительно элемента. Должна быть одной из следующих строк:

"beforebegin"

Перед элементом. Действительно только если элемент находится в дереве DOM и имеет родительский элемент.

"afterbegin"

Внутри элемента, перед его первым дочерним элементом.

"beforeend"

Внутри элемента, после его последнего дочернего элемента.

"afterend"

После элемента. Действительно только если элемент находится в дереве DOM и имеет родительский элемент.

text

Строка, которая должна быть обработана как HTML или XML и вставлена в дерево.

None (undefined).

Этот метод может вызвать DOMException одного из следующих типов:

NoModificationAllowedError DOMException

Выбрасывается, если position является "beforebegin" или "afterend" и элемент либо не имеет родителя, либо его родитель — объект Document.

SyntaxError DOMException

Выбрасывается, если position не является одним из четырёх перечисленных значений.

Метод insertAdjacentHTML() не повторно анализирует элемент, на котором он используется, и, следовательно, не повреждает существующие элементы внутри этого элемента. Это избегает дополнительной стадии сериализации, что делает его значительно быстрее, чем непосредственное манипулирование innerHTML.

Мы можем визуализировать возможные позиции вставляемого содержимого следующим образом:

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

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

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

HTML

<select id="position">
  <option>beforebegin</option>
  <option>afterbegin</option>
  <option>beforeend</option>
  <option>afterend</option>
</select>

<button id="insert">Insert HTML</button>
<button id="reset">Reset</button>

<p>
  Some text, with a <code id="subject">code-formatted element</code> inside it.
</p>

CSS

code {
  color: red;
}

JavaScript

const insert = document.querySelector("#insert");
insert.addEventListener("click", () => {
  const subject = document.querySelector("#subject");
  const positionSelect = document.querySelector("#position");
  subject.insertAdjacentHTML(
    positionSelect.value,
    "<strong>inserted text</strong>",
  );
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => {
  document.location.reload();
});

Результат

• Element.insertAdjacentElement()
• Element.insertAdjacentText()
• XMLSerializer: Сериализация дерева DOM в строку XML
• пост гостя на hacks.mozilla.org от Henri Sivonen, включающий бенчмарк, демонстрирующий, что insertAdjacentHTML может быть значительно быстрее в некоторых случаях.