Объект JavaScript

Справочник JavaScript

insertAdjacentHTML()Этот метод интерпретирует指定的 текст как HTML и вставляет результат в указанное положение.

Этот метод не перерасшифровывает элементы, используемые в этом элементе, поэтому не разрушает существующие элементы внутри элемента.

Это avoids дополнительные шаги сериализации, что делает его быстрее, чем прямоеinnerHTMLОперации выполняются быстрее.

element.insertAdjacentHTML(position, text)

Пример

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("afterend", "<span>Hello world</span>");

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает метод insertAdjacentHTML():

Метод
insertAdjacentHTML()	является	48	является	является	8

Параметр	Описание
position	Положение относительно элемента. Юридическая стоимость: "afterbegin" - после начала элемента (в качестве первого ребенка) "afterend" - после элемента "beforebegin" - перед элементом "beforeend" - перед завершением элемента (в качестве последнего подэлемента)
text	Строка, которую нужно интерпретировать как HTML

Использование значения "beginbegin":

Пример

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("afterbegin", "<span style='color:red;'>Hello world</span>");

Использование значения "beforebegin":

Пример

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("beforebegin", "<span style='color:red;'>Hello world</span>");

Использование значения "beforeend":

Пример

var head = document.getElementsByTagName("h2")[0];
head.insertAdjacentHTML("beforeend", "<span style='color:red;'>Hello world</span>");