Error de limpieza incorrecta del elemento padre en JavaScript

Supongamos que tenemos una lista. Supongamos que al hacer clic en un botón queremos volver a generar esta lista cada vez, limpiando su contenido anterior. Los principiantes a menudo cometen el error de intentar inventar una solución compleja. Veamos una opción simple.

Supongamos que obtenemos la lista en una variable:

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

Supongamos que también obtenemos un botón:

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

Supongamos que al hacer clic en el botón, nuestra lista se llena con algunos valores. Para el ejemplo, tomé un valor aleatorio, correspondiente al segundo actual:

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

En el código anterior, los nuevos elementos de la lista se agregarán después de los existentes. Y nosotros querríamos que los elementos anteriores se eliminen primero. La solución es simple: solo necesitamos limpiar el texto de nuestra etiqueta ul:

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