[Javascript] innerHTML 의 함정

나는 평소에 JQuery 에 익숙해져 있다가, 최근 들어서 pure javascript (=Vanila JS) 를 되도록 사용하기 위해 노력하고 있다.

왜냐? ES6 이후로 js 가 많이 좋아졌다고도 하고... Vue.js 를 앞으로 사용할일이 좀 있는데..

거기서도 JQuery를 같이 쓸거 같지도 않고...

 

여튼, 그래서 최근에는 Vanila JS로 엥간한 자바스크립트 코딩을 하려고 한다.

그래서, 어제 일을하다가 평소에 JQuery 로 내가 아주 즐겨쓰던 함수인 append() 를 어떻게 하면 Vanila JS 로 짤 수 있을까 생각하다가, 그냥 생각없이 element 의 innerHTML 에다가 다른 html string 을 덧붙여보았다.

 

얼추 UI 상으로 보았을때는 크게 문제가 없어보이는데...

이렇게 짯더니 문제점... 내가 할당했던 click 이벤트가 사라졌다는 것이다 !!!

 

그래서 innerHTML 에 대한 내용을 찾아봤다.

innerHTML : 요소(element)의 자손의 HTML 직렬화를 포함하는 DOMString 입니다. Setting the value of innerHTML 의 값을 설정(대입)하면 요소의 모든 자손이 제거되고, 문자열 htmlString에 지정된 HTML을 파싱하고, 생성된 노드로 대체합니다.

 

그리고 이런 말도 쓰여있었다.

요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오.

 

즉, innerHTML 을 사용하게되면 해당 태그(element) 의 모든 하위 html 이 새로운 html 로 통째로 재생성 된다는 뜻이다.

그래서, 본 element를 포함한 모든 자손 element 의 각종 속성(event 포함)이 사라지게 되는 것이다.

 

아래에 처음에 실수했던 코드와 수정 후 코드 예제를 첨부한다.

innerHTML 대신 insertAdjacentHTML 을 사용한 것이 보이는가?

이 함수는 삽입하고자 하는 html 을 이미 사용중인 element 는 건드리지 않고 원하는 위치에 넣어준다.

자세한 내용은 여기를 참고하도록 하자.

 

- End -