Что такое innerHTML и почему иногда его лучше не использовать

Что такое innerHTML и почему иногда его лучше не использовать

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

Пример:

// Берём элемент <div> со страницы const div = document.getElementById("example");

// Устанавливаем его содержимое div.innerHTML = "<p>Привет, я новый текст!</p>";

Теперь в <div id="example"> появится <p>Привет, я новый текст!</p>. Всё, что ранее было внутри тега <div> (если что-то было), заменяется.

**Чем удобен **innerHTML

— Просто и быстро. Позволяет одной строкой добавить в элемент сложный HTML-код. — Динамичность. Можно генерировать HTML-контент программно, например, на основе данных из API.

const list = ["яблоко", "банан", "апельсин"];

document.getElementById("list").innerHTML = list.map(item => <li>${item}</li>).join("");

После выполнения в элементе с id "list" появится список:

<ul> <li>яблоко</li> <li>банан</li> <li>апельсин</li> </ul>

Почему же тогда в некоторых случаях лучше НЕ использовать innerHTML?

**1. Уязвимость для XSS-атак. **При работе с innerHTML вы буквально вставляете HTML-код внутрь страницы. Если этот код генерируется на основе сторонних данных (например, от пользователя или с сервера), есть риск внедрения вредоносного кода.

2. Удаление старого содержимого. innerHTML полностью перезаписывает всё, что было внутри элемента. Если в элементе были установлены события (например, через addEventListener), они будут сброшены.

3. Низкая производительность на больших объёмах данных. Если нужно добавлять или изменять много элементов, innerHTML может стать неэффективным. Каждый раз он полностью пересоздаёт внутреннюю структуру элемента, даже если изменения минимальны.

Чем же тогда заменить её?

1. Используйте textContent, если нужен только текст. Если нужно только поменять текст внутри элемента, а HTML не нужен, то textContent — ваш друг. Он безопасен, потому что не интерпретирует HTML.

2. Используйте insertAdjacentHTML, чтобы добавить HTML без перезаписи контента. insertAdjacentHTML позволяет вставлять HTML в конкретное место относительно элемента, не перезаписывая всё содержимое.

3. Создавайте элементы через DOM-методы для сложной логики. Вместо innerHTML можно использовать методы вроде document.createElement и appendChild.

Если всё же решитесь использовать innerHTML, убедитесь, что данные, которые вы вставляете, безопасны и тщательно проверены.

#простымисловами #html #javascript