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