innerHtml 사용시 event listener 사라짐 해결

발생한 문제 🚩

element.innerHtml += `html 코드` 를 사용했더니 element 안에 있던 요소들에게 JS 파일에서 동적으로 준 action event listener 들이 초기화됐다!

문제 발생의 원인

MDN innerHtml 문서에 따르면 innerHtml 사용시 안에 있던 요소들이 새로운 html 로 바뀌는 것이므로 JS 파일에서 동적으로 줬던 event listener 들이 다시 덮어 씌워지는 문제였다

해결방법

요소를 추가하려면 isertAdjacentHtml() 을 사용하기를 권장하는 말이 있다.

추가로 innerHtml 주의할 점

공식 문서를 읽다보니, innerHtml 을 사용자에게 입력값을 받은 것을 입력하는 경우, 사용자가 Javascript code를 적어서 Cross Site Script (XSS) 공격을 할 수 있으므로 되도록 사용자에게 받는 값을 쓰지 않도록 보안에 신경쓰라는 경고 문구가 있었다.

ex) Element.innerHtml = <script>alert("해킹 위험!")</script>