카카오 맵 API를 사용하던중 윈도우 인포를 생성하기위해 windoinfow.setContent()함수를 사용하였습니다.
해당함수의 매개변수로는 HTML 문자열을 넣어야하는데. 이때 HTML문자열이 매우 길어 따른 리턴값으로 HTML 문자열을 주는 함수로 만들었습니다.
이때 HTML 문자열 내에 존재하는 엘리먼트를 참조하고 싶어 id값을 준뒤.
setContent()를 호출하고 있는 함수에서 document.getElementById(“ID값”)을 통해 참조하였으나 null값이 나옵니다.
어떻게 해결해야하는지 궁금합니다. 저의 목적은 HTML 문자열 내에 있는 elment에 대해서 클릭이벤트리스너를 작성하는 것입니다.
안녕하세요~ infowindow나 CustomOverlay 의 setContent 함수 내부에는
HTML 문자열을 넣을 수도 있으나,
HTML객체를 만들어서 넣을 수도 있습니다.
다만 이렇게 하여도 보통 DOM노드는 찾을 수 있긴한데,
이벤트 핸들러를 다는게 목적이라면
https://apis.map.kakao.com/web/sample/removableCustomOverlay/
이 예제를 참고해 보셔도 됩니다.
그리고 HTML문자열이 아닌 DOM생성을 직접 하셔서 관리하시면 DOM Ref를 항상 들고 있을 수 있으니 이렇게 작업하셔도 됩니다. 반복되는 노드라면 함수로 빼도 되구요.
infowindow.setContent('<div><p>asdasd</p></div>')
//이게 아닌
const box = document.createElement('div');
const text = document.createElement('p');
box.appendChild(text);
infowindow.setContent(box);
box.addEventListener('click', (e) => { console.log('click'); });
이렇게 하는 방법도 존재합니다.
한번 참고해 보세요. 정답은 없습니다. ㅎ