DOM API를 사용하여 element를 추가하는 방법은 innerHTML, createElement & appendChild 로 대개 나뉜다.

비교하는 시간을 가져보자.

innerHTML()

element.innerHTML = 'content is here';
element.innerHTML = '<div><span>span tag!</span>div tag!</div>';

텍스트로 태그를 만들어 넣을 수 있는 점 때문에 Security Risk가 있다.

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

const externalHTML = `<img src='1' onerror='alert("Error loading image")'>`;
// alert 띄워짐
div.innerHTML = externalHTML;

특정 태그에 innerHTML을 사용하게 되면 그 태그의 모든 하위 노드들을 다시 파싱하고 다시 생성하는 비효율적인 과정을 거친다. 아래 코드의 div가 그렇다.

const div = document.querySelector('.container');
div.innerHTML += '<p class="note">inefficiency</p>';

createElement()

let element = document.createElement('span'); 
newElement.textContent = `I'm span tag`;
div.appendChild(newElement);

매 반복마다 실제 DOM Tree에 appendChild 해주는 코드가 있을 수 있다. 아래 코드는 낭비되는 코드다.

for (i = 0; i < 100; i++) { 
	const newElement = document.createElement('p'); 
	newElement.textContent = `No.${i+1} p tag`;
	div.appendChild(newElement); 
}

그럴때는 DocumentFragment를 통한 최적화를 할 수 있다.

const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
   let p = document.createElement('p');
   p.textContent = `No.${i+1} p tag`;
   fragment.appendChild(p);
}

div.appendChild(fragment);