17,7 тыс подписчиков

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

8 августа 20248 авг 2024

1 мин

Рассказываем о пяти методах, которые помогут вам гибко и безопасно добавлять динамический контент на страницы, используя ванильный JavaScript. Создание DOM-элементов из строк обеспечивает: Почти все современные JavaScript-фреймворки и библиотеки предоставляют удобные инструменты для создания DOM-элементов из HTML-строк – это одна из основных задач, которую они решают. Если же нужно обойтись возможностями ванильного JavaScript, то это можно сделать несколькими разными способами. Это самый известный метод: он позволяет вставить строку HTML внутрь атрибута innerHTML контейнера и затем получить доступ к созданному узлу DOM. Однако он может обрабатывать только допустимые узлы HTML – к примеру, попытка вставить элемент в приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML строках, что делает его безопасным при работе с непроверенным содержимым. 👨‍💻🎨 Библиотека фронтендера Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека

Оглавление

innerHTML
innerHTML + template
insertAdjacentHTML

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

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

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

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

innerHTML

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

приведет к тому, что узел не будет создан. Кроме того, этот метод не выполняет скрипты в HTML строках, что делает его безопасным при работе с непроверенным содержимым.

👨‍💻🎨 Библиотека фронтендера

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

innerHTML + template

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

insertAdjacentHTML

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

Статья по теме

❔ DOM: что такое объектная модель документа простыми словами

DOMParser

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

Range.createContextualFragment

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

***

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

Язык программирования JavaScript

1946 интересуются