Ошибка неправильной очистки родителя в JavaScript

Пусть у нас есть некоторый список. Пусть по нажатию на кнопку мы хотим каждый раз заново сформировать этот список, очистив его предыдущее содержимое. Новички часто совершают ошибку, пытаясь придумать какое-то сложное решение. Давайте посмотрим простой вариант.

Пусть мы получаем список в переменную:

let ul = document.querySelector('ul');

Пусть также мы получаем кнопку:

let btn = document.querySelector('button');

Пусть по нажатию на кнопку наш список заполняется некоторыми значениями. Для примера я взял случайное значение, соответствующее текущей секунде:

btn.addEventListener('click', function() { let rand = new Date.getSeconds(); for (let i = 0; i <= rand; i++) { let li = document.createElement('li'); li.textContent = i; ul.append(li); } });

В приведенном выше коде, новые пункты списка будут добавляться после уже существующих. А мы бы хотели, чтобы предыдущие пункты сначала удалялись. Решение простое - нужно просто очистить текст нашего тега ul:

btn.addEventListener('click', function() { ul.textContent = ''; // чистим список let rand = new Date.getSeconds(); for (let i = 0; i <= rand; i++) { let li = document.createElement('li'); li.textContent = i; ul.append(li); } });