Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Element.insertAdjacentHTML()

JavaScript Element

Определение и применение

JavaScript метод insertAdjacentHTML() объекта Element производит анализ указанного текста как HTML или XML, и вставляет полученные узлы в дерево DOM в указанной позиции.


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


Схематичное отображение работы метода insertAdjacentHTML() отображено на следующем изображении:

Схематичное отображение работы метода insertAdjacentHTML() объекта Element

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

Поддержка браузерами

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
insertAdjacentHTML()ДаДаДаДаДаДа

JavaScript синтаксис:

targetElement.insertAdjacentHTML(position, text);

position - String
text - String

Версия JavaScript

DOM Parsing and Serialization

Значения параметров

ПараметрОписание
positionСтроковое значение, представляющее позицию относительно целевого элемента.
Возможные значения:
  • "beforebegin" - Текстовое содержимое будет вставлено перед целевым элементом.
  • "afterbegin" - Текстовое содержимое будет вставлено внутри целевого элемента перед его первым дочерним элементом.
  • "beforeend" - Текстовое содержимое будет вставлено внутри целевого элемента после его последнего дочернего элемента.
  • "afterend" - Текстовое содержимое будет вставлено после целевого элемента.
Позиции "beforebegin" и "afterend" работают только в том случае, если узел находится в дереве и имеет родительский элемент. Является обязательным параметром.
textТекстовое содержимое, которое будет вставлено в дерево DOM. Обязательный параметр.

Исключения

Тип исключенияОписание
SyntaxErrorВозникает в том случае, если указанная позиция не является возможным значением.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода insertAdjacentHTML()</title>
	</head>
	<body>
		<button onclick = "insertAfterBegin()">Insert with afterbegin position</button> <!-- добавляем атрибут событий onclick -->
		<button onclick = "insertBeforeEnd()">Insert with beforeend position</button> <!-- добавляем атрибут событий onclick -->
		<ul>
		        <li>Элемент списка</li>
		</ul>
		<script>
	const ul = document.querySelector("ul"); // выбираем первый элемент <ul> в документе
	let li = "<li>My element</li>"); // инициализируем переменную, содержащую HTML строку
  
	function insertAfterBegin() {
	  ul.insertAdjacentHTML("afterbegin", li); // текстовое содержимое будет вставлено внутри целевого элемента перед его первым дочерним элементом
	}

	function insertBeforeEnd() {
	  ul.insertAdjacentHTML("beforeend", li); // текстовое содержимое будет вставлено внутри целевого элемента после его последнего дочернего элемента
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на определенную кнопку (HTML элемент <button>) мы вызываем функцию, которая с помощью метода insertAdjacentHTML() вставляет HTML строку внутрь элемента <ul> перед его первым дочерним элементом, или после его последнего дочернего элемента.

Обратите внимание, что мы предварительно с использованием метода querySelector() выбираем первый элемент <ul> в документе и инициализируем этим значением переменную. Кроме того, мы инициализируем переменную, которая содержит HTML строку.

Обратите внимание на важный момент после поочередного нажатия кнопок наше строковое значение будет каждый раз вставляться в элемент <ul> заново, а не вырезаться из его текущей позиции.

Результат нашего примера:

Пример использования метода insertAdjacentHTML()
Пример использования метода insertAdjacentHTML()
JavaScript Element
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.