Изменение HTML-разметки в JavaScript

• Добавление разметки
• Непроверенные данные
• Итого

Если разметку внутри элемента нужно полностью заменить, используйте innerHTML. Здесь разберём случай, когда готовый HTML-фрагмент нужно добавить, сохранив текущее содержимое.

Добавление разметки

Чтобы добавить готовый HTML-фрагмент и сохранить текущее содержимое, используйте insertAdjacentHTML().

<ul class="tasks">
  <li>Проверить почту</li>
</ul>

const tasks = document.querySelector('.tasks');

tasks.insertAdjacentHTML('beforeend', '<li>Подготовить отчёт</li>');

Значение beforeend добавляет разметку перед закрывающим тегом элемента. Новая задача появится в конце списка, а существующая останется на месте.

Не используйте для этого innerHTML += …. Такое выражение тоже пересоздаёт всё содержимое элемента.

Непроверенные данные

Не передавайте в innerHTML и insertAdjacentHTML() текст от пользователя или внешнего сервиса напрямую. Эти способы разбирают строку как HTML, поэтому это может привести к XSS-уязвимости. Если нужна только строка, используйте textContent.

Итого

Для добавления известного HTML-фрагмента без замены текущего содержимого используйте insertAdjacentHTML(). Не передавайте ему непроверенные данные. Обычный текст выводите через textContent.