Создание DOM-элементов без склейки HTML

Назначение

createElement и textContent позволяют собрать небольшой фрагмент интерфейса, явно отделяя структуру от текстовых данных.

Как это работает

Приложение создаёт нужный элемент, назначает свойства и добавляет его в выбранный контейнер. textContent не интерпретирует угловые скобки как новые теги, что подходит для обычных пользовательских строк.

Пример

const list=document.querySelector("[data-results]");
if(list){
const item=document.createElement("li");
item.textContent="Пример <strong>как обычный текст</strong>";
list.append(item);
}

Что должно получиться

В списке появляется один li, а strong остаётся частью видимой строки. Для запуска нужен существующий контейнер data-results в отдельной учебной странице.

Граница применения и частая ошибка

Безопасный вывод текста не означает безопасность любого атрибута. Адрес href или src из внешних данных требует проверки допустимой схемы и назначения отдельно.

Самостоятельная проверка

Передайте заголовок, содержащий угловые скобки, и убедитесь, что он показан буквально. Затем добавьте несколько элементов и проверьте, где именно они появились в DOM.

Связанные материалы

• Локальный HTTP-просмотр
• Просмотр изменений
• Проверка публикации