innerHTML을 사용할때 주의 할 점.

javascript로 플러그인이나 라이브러리
좀 더 편한 개발을 위해 제작하다보면 innerHTML을 많이 활용하게 된다.

var div = document.createElement('div');
div.className = "modal";
div.innerText = '모달내용';
document.body.appendChild(div);

이렇게 하는것보다

document.body.innerHTML += `<div class="modal">모달내용</div>

이 편하기 때문이다.

하지만 innerHTML의 경우 추가된 내용만 추가하는것이 아니라 모든 내용을 처음부터 다시 그린다.

새로 작성하는것과 마찬가지라는 것이다.
그래서 등록된 이벤트, 현재 진행중인 이벤트 모든것이 취소가 된다.
물론 해당 태그에 직접 onclick등으로 된것은 해당 엘리먼트에 innerHTML만으로도 재할당되기에 동작이 된다.
하지만 addEventListner나 jquery등으로 등록한 이벤트는 실행되지 않는다.
(이걸 활용하여 상황에 따라 등록된 이벤트를 초기화 하기도 하니 사용하기 나름이다)

또한 내용이 많을 경우 그리는데에 시간이 많이 가게된다.
간단한 내용 특정 지역에서 새로 그려도 크게 문제 없는 부분이라면 innerHTML을 써도 무방하지만
그것이 아니라면 appendChild를 사용하는것이 낫다