В процессе работы с JavaScript и DOM, часто возникает потребность в динамической вставке контента на страницу.

Для этого существуют методы insertAdjacentHTML и insertAdjacentText, которые делают эту задачу легкой и эффективной. Давайте изучим, как эти методы могут сделать ваш код более гибким и удобным.

Метод insertAdjacentHTML

Метод insertAdjacentHTML позволяет вставлять HTML-разметку в указанное место относительно выбранного элемента. Просто говоря, вы добавляете кусок HTML-кода в определенную часть элемента на странице. Синтаксис следующий:

element.insertAdjacentHTML(position, html);

element: Элемент, относительно которого будет выполнена вставка.position: Позиция вставки, такая как "beforebegin", "afterbegin", "beforeend", или "afterend".html: HTML-разметка, которую вы хотите вставить.

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

var targetElement = document.getElementById("myElement");
targetElement.insertAdjacentHTML("beforeend", "<p>Динамически вставленный параграф</p>");

var targetElement = document.getElementById("myElement"); Этот код выбирает элемент на странице с идентификатором myElement и сохраняет его в переменную targetElement. Предполагается, что на странице есть элемент с таким идентификатором.

targetElement.insertAdjacentHTML("beforeend", "<p>Динамически вставленный параграф</p>"); В этой строке вызывается метод insertAdjacentHTML для выбранного элемента (targetElement). Метод принимает два аргумента:

"beforeend": Это позиция вставки, означающая, что HTML-разметка будет вставлена в конец содержимого выбранного элемента."<p>Динамически вставленный параграф</p>": Это HTML-разметка, которую мы вставляем. В данном случае, это новый параграф.

Метод insertAdjacentText

Метод insertAdjacentText аналогичен insertAdjacentHTML, но вместо HTML-разметки он вставляет обычный текст. Простой и эффективный способ добавить текстовый контент в определенную часть элемента. Синтаксис:

element.insertAdjacentText(position, text);

element: Элемент, относительно которого будет выполнена вставка.position: Позиция вставки, такая же, как и у insertAdjacentHTML.text: Текст, который вы хотите вставить.

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

var targetElement = document.getElementById("myElement");
targetElement.insertAdjacentText("beforeend", "Динамически вставленный текст");

Выбор элемента: Сначала мы используем document.getElementById("myElement"), чтобы получить ссылку на элемент с идентификатором "myElement" на странице.

Метод insertAdjacentText: Далее мы вызываем метод insertAdjacentText для выбранного элемента (targetElement).

Параметры метода:

• "beforeend": Это указывает позицию вставки - в данном случае, в конец содержимого выбранного элемента.
• "Динамически вставленный текст": Это текст, который мы вставляем в выбранный элемент.

Результат:После выполнения этого кода, текст "Динамически вставленный текст" будет добавлен в конец содержимого элемента с идентификатором "myElement" на странице.

Если, например, изначальное содержимое элемента "myElement" было <div>Начальный контент</div>, после выполнения этого кода его содержимое станет <div>Начальный контентДинамически вставленный текст</div>

Этот метод полезен, когда вы хотите добавить текст в определенное место элемента без использования HTML-разметки.

Почему это важно?

• Гибкость: Эти методы предоставляют гибкость вставки контента в различные части элементов.
• Эффективность: Вы избегаете создания временных элементов, делая вставку более эффективной.

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

var targetElement = document.getElementById("myElement");
// Вставка HTML-разметки перед элементом и текста после элемента
targetElement.insertAdjacentHTML("beforebegin", "<div>Дополнительный блок</div>");
targetElement.insertAdjacentText("afterend", "Текст после элемента");

Давайте подробно разберем каждую строку:

1. var targetElement = document.getElementById("myElement");Получение ссылки на элемент с идентификатором "myElement". Это предполагает, что на странице есть элемент с указанным идентификатором.
2. targetElement.insertAdjacentHTML("beforebegin", "<div>Дополнительный блок</div>");Вставка HTML-разметки перед элементом (перед открывающим тегом элемента, на который указывает targetElement). Таким образом, создается новый блочный элемент <div>Дополнительный блок</div>, который располагается перед элементом с идентификатором "myElement".
3. targetElement.insertAdjacentText("afterend", "Текст после элемента");Вставка текста после элемента (после закрывающего тега элемента, на который указывает targetElement). Текст "Текст после элемента" добавляется после элемента с идентификатором "myElement".

Таким образом, в результате выполнения этого кода на странице создается новый блочный элемент <div>Дополнительный блок</div>, который находится перед элементом с идентификатором "myElement", и добавляется текст "Текст после элемента" после этого элемента.

Основные позиции вставки

• "beforebegin": Вставляет контент перед выбранным элементом.
• "afterbegin": Вставляет контент внутрь выбранного элемента в начало его содержимого.
• "beforeend": Вставляет контент внутрь выбранного элемента в конец его содержимого.
• "afterend": Вставляет контент после выбранного элемента.

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

var targetElement = document.getElementById("myElement");
// Вставка контента перед элементом
targetElement.insertAdjacentHTML("beforebegin", "<div>Контент перед элементом</div>");
// Вставка контента в начало содержимого элемента
targetElement.insertAdjacentHTML("afterbegin", "<p>Контент в начало</p>");
// Вставка контента в конец содержимого элемента
targetElement.insertAdjacentHTML("beforeend", "<span>Контент в конец</span>");
// Вставка контента после элемента
targetElement.insertAdjacentHTML("afterend", "<hr>");

Применение в реальных сценариях

• Динамическое обновление интерфейса: Методы insertAdjacentHTML и insertAdjacentText часто используются для динамического добавления элементов и текста при взаимодействии пользователя с веб-страницей.
• Манипуляции с данными: При получении данных с сервера, вы можете использовать эти методы для вставки их на страницу без необходимости перезагрузки.

Заключение

Методы insertAdjacentHTML и insertAdjacentText приносят в ваш код удобство и читаемость. Используйте их для динамического изменения содержимого страницы, создания интерактивных пользовательских интерфейсов и сделайте свой код более выразительным и простым в поддержке.