[JS] createElement vs innerHTML

클라이언트에서 데이터 작업을 하다보면 javascript 코드로 DOM을 생성해야하는 경우가 꽤 많다. 짧은 코드를 선호하는 편이어서 항상 innerHTML 을 사용하곤 했는데, createElement() 를 활용한 예제코드가 많이 보여서 두가지 방법 중 어떤 방법이 더 효율적인지 찾아보았다.

결론 : createElement()가 더 안전하고 성능이 좋다.

...그렇다고 한다. innerHTMl 의 활용성을 놓치기는 아쉽지만, 더 성능 좋은 서비스를 위해서는 createElement() 로 작성하는 습관을 들여야겠다. 아래는 createElement() 와 innerHTML 을 사용한 코드를 비교한 글이다.

1. createElement()가 더 성능이 좋다.

• 아래와 같이 box class를 가진 div 가 있다고 가정해보면,

<div class="box"></div>

(1) createElement() 를 사용하여 새 요소를 추가할 수 있다.

let box = document.querySelector('.box');

let box_text = document.createElement('p');
box_text.textContent = '자바스크립트';
box.appendChild(box_text);

(2) innerHTML 로 요소를 직접 조작할 수 있다.

let box = document.querySelector('.box');
box.innerHTML += '<p>자바스크립트</p>';

• (2)의 방법으로 작업 시, 깔끔하고 짧게 코드를 작성할 수 있다. 그러나 innerHTML 을 사용하면 웹 브라우저가 div 요소 내부의 모든 DOM 노드 를 재분석하고 다시 생성하게 된다. 따라서 createElement() 를 통해 새 요소를 만들고 기존 div에 추가하는것이 innerHTML 을 사용하여 직접 요소를 조작하는 것보다 효율적이다.

2. createElement()가 더 안전하다.

• innerHTML 의 경우, 제어할 수 없는 내용을 적용하면 악성코드가 주입되어 실행될 가능성이 있다. 그러므로 innerHTML 을 사용할 때는 반드시 데이터베이스와 같이 신뢰가능한 소스에서 데이터를 가져와 적용해야 한다.

3. DocumentFragment 사용하기

• 반복문으로 생성해낸 여러개의 요소를 적용해야 하는 상황이 있다.

let box = document.querySelector('.box');

for (let i = 0; i < 1000; i++) {
   let box_text = document.createElement('p');
   box_text.textContent = `번호 : ${i}`;
   box.appendChild(box_text);
}

• 위의 코드는 스타일, 레이아웃 등을 반복할 때마다 다시 계산해야해서 효율적이지 않다. 이 경우에 일반적으로 DocumentFragment 를 사용하여 DOM 노드를 구성하고 DOM 트리에 추가한다.

let box = document.querySelector('.box');

let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
   let box_text = document.createElement('p');
   box_text.textContent = `번호 : ${i}`;
   fragment.appendChild(box_text);
}

box.appendChild(fragment);

• 이 경우에 DocumentFragment 개체를 사용하여 DOM 노드를 구성하고, 마지막으로 DOM 트리에 해당 개체를 한 번만 추가하면 된다. (DocumentFragment 는 DOM 트리에 링크되지 않으므로 퍼포먼스가 발생하지 않는다.)

• DocumentFragment 에 대한 자세한 사항은 튜토리얼을 참고.

참고 https://www.javascripttutorial.net/
2022.10.19