createElement와 innerHTML

JavaScript를 이용하여 HTML을 동적으로 넣는 방법의 차이를 알아보자.

createElement/append

createElement로 HTML 엘리먼트를 만들고 append를 이용하여 추가하는 방법이다.

const div = document.createElement("div");
div.textContent = "안녕하세요!";
document.body.append(div);

장점
XSS(스트립트 삽입 공격)에 상대적으로 강하여 보안면에서 안전하다고 할 수 있다.
속성, 이벤트, 클래스 등을 코드 단위로 명확하게 제어가 가능하기 때문에 복잡한 DOM 조작이나 동적 UI 생성에 적합하다.

단점
코드가 일어지고 직관성이 떨어져 HTML 구조 파악이 어렵다.

innerHTML

innerHTML을 이용해서 태그를 직접 삽입하는 방법이다.

document.body.innerHTML += "<div>안녕하세요!</div>";

장점
HTML 문자열 그대로 넣을 수 있어서 빠르게 UI 작성이 가능하다.
정적인 콘텐츠(한 번 넣고 끝나는 요소)에 적합하다.
템플릿 리터럴을 사용하면 변수도 깔끔하게 넣을 수 있다.

단점
문자열을 그대로 넣으므로 악성 스크립트 삽입 위험이 있다.
기존 DOM이 모두 파싱/재생성이 되므로 이벤트 핸들러도 날아가버리는 문제가 발생하기 때문에 복잡한 동적 UI에는 비효율적이다.

createElement vs innerHTML

1. createElement
   UI를 동적으로 조작하거나 이벤트가 걸린 요소를 유지해야 하는 경우
   ex) 컴포넌트/동적 UI 구축

2. innerHTML
   빠르게 정적인 HTML 조각을 넣어야 하는 경우
   ex) 작은 텍스트 교체