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