youngfromnowhere

jQuery에 내장된 $.ajax 함수를 이용해 웹서버에서 정보를 받아오고 그 정보들로 DOM을 형성해서 원래 페이지에 삽입하려고 한다. 이 때 내가 보고 있는 강의 자료에서는 tmp_HTML 이라는 변수를 선언하고 거기에 직접 HTML 코드를 백틱(`) 문자열로 입력한뒤 $.ajax로 받아온 정보들을 저장한 변수들을 ${변수명}으로 기입하여, "html 문법으로 된 문자열"을 만들고 이를 html 요소 안에 .text() 메소드로 삽입하는 방법을 썼다. 난 이 방법이 마음에 들지 않았는데, 백틱으로 감쌌다지만 html 문법이 JS 스크립트 영역에서 보이는 자체가 마음에 들지 않았고, 만약 복잡한 형태의 요소를 html 문서에 추가하고 싶다면 이 방법으로 작성했을 시 가독성을 헤칠것처럼 보였기 때문이다...

뭘 하고 싶었느냐, .mytitle 안의 button이 눌렸을때 hey가 뜨게 하고 싶었다. 그런데 Uncaught Type Error: Cannot set propertis of null이라는 에러 메세지가 떴다. 뜻을 알아보니 즉, querySelector로 잡아온 object가 없기 때문에 (null)이기 때문에 onclick이라는 property를 설정할 수가 없다는 얘기 원인은 아주 간단한 실수였다. html 스크립트 상에 내가 잡아오고 싶은 element인 button이 script 태그보다 나중에 정의된 것이다. js파일을 따로 빼고 싶을땐 script 태그의 위치를 신경쓰자! script 태그의 위치를 button태그의 뒤로 옮기자 잘 작동하였다ㅎ.