Вставка HTML с помощью метода insertAdjacentHTML() в JavaScript

Синтаксис метода insertAdjacentHTML()

element.insertAdjacentHTML(position, text);
  • element: Элемент DOM, к которому применяется вставка HTML-разметки.
  • position: Расположение, в которое будет вставлен HTML-код. Это может быть одно из четырех значений: "beforebegin", "afterbegin", "beforeend", "afterend".
    • "beforebegin": Вставляет HTML перед указанным элементом.
    • "afterbegin": Вставляет HTML внутрь указанного элемента, перед его первым дочерним элементом.
    • "beforeend": Вставляет HTML внутрь указанного элемента, после его последнего дочернего элемента.
    • "afterend": Вставляет HTML после указанного элемента.
  • text: HTML-разметка, которую необходимо вставить.

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

Вставка HTML перед указанным элементом ("beforebegin")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InsertAdjacentHTML Примеры</title>
</head>
<body>
<div id="myElement">Текст перед вставкой</div>
<script>
var element = document.getElementById("myElement");
element.insertAdjacentHTML('beforebegin', '<div>Новый элемент перед текущим</div>');
</script>
</body>
</html>

Вставка HTML внутрь указанного элемента перед его первым дочерним элементом ("afterbegin")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InsertAdjacentHTML Примеры</title>
</head>
<body>
<div id="myElement">Текст перед вставкой</div>
<script>
var element = document.getElementById("myElement");
element.insertAdjacentHTML('afterbegin', '<div>Новый элемент внутри перед первым дочерним элементом</div>');
</script>
</body>
</html>

Вставка HTML внутрь указанного элемента после его последнего дочернего элемента ("beforeend")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InsertAdjacentHTML Примеры</title>
</head>
<body>
<div id="myElement">Текст перед вставкой</div>
<script>
var element = document.getElementById("myElement");
element.insertAdjacentHTML('beforeend', '<div>Новый элемент внутри после последнего дочернего элемента</div>');
</script>
</body>
</html>

Вставка HTML после указанного элемента ("afterend")

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InsertAdjacentHTML Примеры</title>
</head>
<body>
<div id="myElement">Текст перед вставкой</div>
<script>
var element = document.getElementById("myElement");
element.insertAdjacentHTML('afterend', '<div>Новый элемент после текущего</div>');
</script>
</body>
</html>

Заключение

Метод insertAdjacentHTML() предоставляет простой и эффективный способ вставки HTML-разметки внутрь документа в точно заданное место. Пользуйтесь этим методом для динамического обновления содержимого страницы и управления ее структурой без необходимости многословного JavaScript-кода.

Комментарии

Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!

Написать коментарий