Как очищать содержимое DOM-элемента?

Очистка содержимого DOM-элемента

Очистка DOM-элемента — частая задача при работе с динамическим интерфейсом. Неправильный подход может привести к утечкам памяти или медленной работе. Рассмотрим основные методы.

Методы очистки

• innerHTML = '' — самый простой, но медленный и потенциально опасный: удаляет все дочерние элементы, включая обработчики событий, что может вызвать утечки.
• textContent = '' — быстрее, чем innerHTML, так как не парсит HTML. Удаляет только текстовые узлы, но не затрагивает дочерние элементы.
• removeChild в цикле — надёжный способ, удаляет каждый дочерний узел по одному. Пример:

const parent = document.getElementById('container');
while (parent.firstChild) {
  parent.removeChild(parent.firstChild);
}

• replaceChildren() — современный метод (ES2021), удаляет все дочерние узлы за один вызов. Пример:

const parent = document.getElementById('container');
parent.replaceChildren();

Вывод

Для большинства случаев используйте replaceChildren() — это быстро, безопасно и читаемо. Если нужна поддержка старых браузеров, подойдёт цикл с removeChild. Избегайте innerHTML = '' из-за риска утечек и производительности.