appendChild vs innerHTML (자바스크립트)

자바스크립트 (JavaScript)

 

See the Pen appendChild vs innerHTML by kimyangsun (@kimyangsun) on CodePen.

 

const div = document.querySelector('div');

div.appendChild (newElement); <- appendChild 사용 표기
div.innerHTML += "<p>내용</p>" <- innerHTML 사용 표기

 

appendChild는 인자를 해당하는 부분에 마지막에 더해준다.

innerHTML은 내부 HTML을 완전히 바꾼다.

 

위의 코드팬과 같이 innerHTML은 문자열을 만든 뒤 사용하는게 성능에 좋다.