Памылка няправільнай ачысткі бацькі ў 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);
	}
});