LearnJS

innerHTML в JavaScript

Получение HTML-разметки

Свойство innerHTML возвращает HTML-разметку внутри элемента. Внешний тег самого элемента в строку не входит.

<div class="notice"><strong>Готово</strong></div>
const notice = document.querySelector('.notice');

console.log(notice.innerHTML); // <strong>Готово</strong>

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

При присваивании браузер разбирает строку как HTML и полностью заменяет содержимое элемента.

notice.innerHTML = '<strong>Готово</strong> - заказ оформлен';

Тег strong станет элементом, поэтому слово «Готово» будет жирным.

Сам контейнер останется на странице, но все его дочерние элементы будут удалены и созданы заново. Обработчик, добавленный через addEventListener() к вложенному элементу, для нового элемента нужно назначить снова.

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

innerHTML и textContent

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

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

Не передавайте в innerHTML текст от пользователя или внешнего сервиса напрямую. Браузер разберёт его как HTML, что может привести к XSS-уязвимости. Для обычной строки используйте textContent, а внешнюю HTML-разметку очищайте проверенным санитайзером.

Итого

innerHTML позволяет получить или заменить HTML-разметку внутри элемента. При присваивании содержимое заменяется целиком. Непроверенные данные через это свойство выводить нельзя.