Cannot read properties of null (reading 'append') 에러

프로퍼티에 null값이 들어있다고 뜹니다.

// 자바스크립트
let container = document.querySelector("#container")

// html
<div id="container"></div>

html에서 id를 준다음 그 id를 가져와 초기화 해놓은 상태이지만

container에서는 계속 null인 상태로 인식하고 append메소드를 호출 하고 있기 때문에 발생 한것이였습니다..

 

이 문제가 생기는것은 스크립트가 실행되는 시점에 HTML 문서가 아직 로드되지 않았기 때문에 발생하거나 해당 요소의 id가 존재하지 않아서 발생할수 있다고 합니다.

 

위 코드에선 id가 들어가는것은 문제 될 것이 없어보여 script를 문서가 다 읽히고 로딩되게 body태그 안쪽의 최 하단에 위치하게 하였더니

해당 id를 읽어 작업을 완료 하였습니다.