Frog Proger 08 августа 2024

🏠 5 способов создания DOM-элементов из HTML-строк методами JavaScript

Рассказываем о пяти методах, которые помогут вам гибко и безопасно добавлять динамический контент на страницы, используя ванильный JavaScript.
🏠 5 способов создания DOM-элементов из HTML-строк методами JavaScript

Работа мечты в один клик 💼

Работа в Сбере: пройди собеседование и получи оффер за 15 минут

💭Мечтаешь работать в Сбере, но не хочешь проходить десять кругов HR-собеседований? Теперь это проще, чем когда-либо!

💡AI-интервью за 15 минут – и ты уже на шаг ближе к своей новой работе.

Как получить оффер?
📌 Зарегистрируйся
📌 Пройди AI-интервью
📌 Получи обратную связь сразу же!

HR больше не тянут время – рекрутеры свяжутся с тобой в течение двух дней! 🚀

Реклама. ПАО СБЕРБАНК, ИНН 7707083893. Erid 2VtzquscAwp


Создание DOM-элементов из строк обеспечивает:

  1. Динамическое создание контента – можно добавлять новые элементы на страницу без перезагрузки.
  2. Гибкость – можно легко генерировать HTML на основе данных, полученных от пользователя или с сервера.
  3. Шаблонизацию – поскольку упрощает создание повторяющихся структур HTML.
  4. Управление интерфейсом – помогает создавать интерактивные элементы, которые реагируют на действия пользователя.

Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами.

innerHTML

Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент <tr> в <div> приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML строках, что делает его безопасным при работе с непроверенным содержимым.

innerHTML
innerHTML
👨‍💻🎨 Библиотека фронтендера
Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера»

innerHTML + template

Использование тега <template> снимает ограничения на содержимое – он может содержать любую HTML структуру, включая элементы, связанные с таблицами – <tr> и <td>.

innerHTML + template
innerHTML + template

insertAdjacentHTML

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

insertAdjacentHTML
insertAdjacentHTML

DOMParser

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

DOMParser
DOMParser

Range.createContextualFragment

Самый простой, но не безопасный метод – выполняет скрипты. Поэтому при его использовании необходимо очищать данные для защиты от XSS – например, с помощью DOMPurify.

Range.createContextualFragment
Range.createContextualFragment
***

Сталкивались ли вы с проблемами при создании DOM элементов из HTML строк? Как вы их решали?

Комментарии

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ