innerHTML vs appendChild

어떤 엘리먼트 안에 새로운 엘리먼트를 추가해야할 때,
innerHTML과 appendChild 중 어느것을 사용하는 갓이 좋을까?

일단 각각의 특징부터 정리해보자.
innerHTML은 일단 string을 파싱하는 작업이 추가된다. 그리고 노드들을 생성 및 직렬화(?)하여, DOM 객체 안의 html에 단 1번 할당하는 방식이다.
appendChild는 만들어진 노드를 타겟 엘리먼트의 자식으로 할당하는 역할을한다. 단, DOM 객체에 접근이 필요하다.

이러한 관점으로 볼때,
추가해야할 노드가 많다면 innerHTML를 사용하여 한번에 주는게 낫고,
추가해야할 노드가 적다면 appendChild으로 문자열 파싱없이 주는게 낫다.

하지만 잘 생각해보면,
노드가 적든말든 DOM 객체에 1번만 접근하고, 문자열 파싱이 없는 것이 가장 best가 아닐까 싶다.

그러기 위해서는 createDocumentFragment로 경량화된 객체를 만들고
이 fragment에 자식 노드를 붙여서 메모리상에서 조작한 후,
라이브 DOM에 추가하는 방법이 나은 것같다. (fragment를 메모리상에 유지하고 싶으면, cloneNode()로 복사하기)
그리고 이때에는 reflow가 일어나지 않는다! (최신 브라우저의 경우 엔진을 최적화함)