[ JS ] innerHTML += 사용 시 주의점

innerHTML += 사용 시 주의점

elem.innerHTML += "추가 html"을 사용하면 요소에 HTML을 추가할 수 있습니다.

chatDiv.innerHTML += "<div>안녕하세요.<img src='smile.gif'></div>";
chatDiv.innerHTML += "잘 지내죠?";

위의 코드는 += 첫번째 내용 다음에 두번째 내용이 추가 되어 출력이 되는 것이 아니라

덮어쓰여지는 문제가 발생합니다.

아래의 코드도 동일한 결과를 반영.

elem.innerHTML += "...";
// 위 코드는 아래 코드의 축약 버전입니다.
elem.innerHTML = elem.innerHTML + "..."

innerHTML+= 은

1. 기존 내용 삭제

2. 기존 내용과 새로운 내용을 합친 새로운 내용을 씀

 

innerHTML+= 부작용

기존 내용이 '완전히 삭제'된 후 밑바닥부터 다시 내용이 쓰여지기 때문에 이미지 등의 리소스가 전부가 다시 로딩됨!

chatDiv 예시의 chatDiv.innerHTML+="잘 지내죠?" 윗줄의 HTML 내용이 재생성되고 smile.gif 역시 다시 로딩되는 것이죠.

어딘가에 이런 리소스들을 캐싱해 놓았다면 좋았을 거라는 생각이 드는 순간이네요. 

chatDiv에 텍스트와 이미지가 많이 있었다면 내용을 다시 불러올 때 버벅임이 생기는걸 눈으로 확인하실 수 있을 겁니다.

이 외에도 innerHTML+=은 여러 부작용이 있습니다. 기존에 있던 텍스트를 마우스로 드래그한 상황이라면 내용을 다시 써야 하기 때문에 드래그가 해제될 겁니다. <input> 태그에서 사용자가 입력한 값이 사라지기도 하죠. 부작용 사례는 다양합니다.

 

주요 노드 프로퍼티