231218 개발일지 TIL - Node.appendChild: Argument 1 is not an object.

Node.appendChild: Argument 1 is not an object.

문제 발생
동영상 URL, 이미지 URL 등을 받아와서 슬라이드 형식으로 구현하는 중에 문제 발생

문제 원인
JavaScript에서 특정 DOM 요소에 다른 요소를 추가하려 할 때 발생하는데 appendChild 메서드는 DOM 요소를 인자로 받아야 하는데, 이 인자가 DOM 요소가 아니라 발생한 현상.

function slideData(videoUrl, offerImages, skuImages) {
	// videoUrl
	let videoLi = document.createElement('li');
	let videoEmbed = document.createElement('video');
	videoEmbed.src = videoUrl;
	videoLi.appendChild(videoEmbed);
	videoLi.style.display = 'none';
	slideShow.appendChild(videoUrl); // 오류 발생 부분
}

위의 코드에서 appendChild 메서드에 videoUrl이라는 문자열을 인자로 전달하고 있었다. 그런데 appendChild 메서드는 DOM 객체를 인자로 받아야 하므로 이 부분에서 오류가 발생했다. videoUrl 대신 videoLi를 전달해야 한다.

해결 방법

slideShow.appendChild(videoLi); // 수정된 코드

느낀 점
appendChild 메서드를 사용할 때에는 항상 DOM 객체를 인자로 전달해야 한다는 것을 잊지 말아야겠다.