🧱 Суть
innerHTML полностью пересоздаёт содержимое элемента (жёсткий reset DOM).
При вызове:
board.innerHTML = '';происходит:
- удаление всех дочерних элементов
- удаление всех обработчиков событий
- потеря ссылок на DOM-узлы
- создание новой разметки
📦 Проблема
1. Теряются обработчики событий
button.addEventListener(...)После innerHTML = '' – обработчик исчезает.
2. XSS-уязвимость
element.innerHTML = userInput;Если пользователь вставит:
<script>alert('hack')</script>код выполнится.
Поэтому:
textContent– безопасенinnerHTML– потенциально опасен
3. Производительность
Полная перерисовка тяжелее, чем точечные изменения.
На маленьких списках – ок
На больших (100+ элементов) – начинаются проблемы.
✅ Решение
Использовать более безопасные и точечные методы:
- текст →
textContent - элементы →
append - очистка →
replaceChildren()
💻 Код
Вставка текста
element.textContent = 'Hello';Вставка элемента
parent.append(child);Очистка контейнера
container.replaceChildren();🎯 Вывод
innerHTML– это удобный, но грубый инструмент- подходит для полного ререндера
- ломает события и может быть небезопасным
- лучше использовать современные DOM-методы