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

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

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

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

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

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

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

javascriptbtn.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:

javascriptbtn.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);
  }
});