createElement와 createDocumentFragment

documentFragment는 라이브 DOM 트리 외부에 경량화된 DOM 객체를 만들 수 있다.

마치 라이브 DOM 트리 처럼 동작하나, 메모리상에서만 존재하는 빈 문서이다.

주로, documentFragment의 자식노드를 메모리상에서 쉽게 조작한 후 라이브 DOM에 추가하는 용도로 사용된다. (appendChild, insertBefore)

그럼 createElement와 차이는 무엇인가?

1) documentFragment는 어떤 종류의 노드도 가질 수 있지만, element는 그렇지 않다.
2) documentFragment는 DOM에 추가해도 documentFragment 자체는 추가되지 않으며 documentFragment의 내용만 추가되지만, element는 그 자체가 추가된다.
3) documentFragment를 DOM에 추가할 때, documentFragment는 추가되는 위치로 이전되고, 생성한 메모리상의 위치에 더 이상 존재하지 않는다.노드를 포함하기 위해 일시적으로 사용된 후, 라이브 DOM으로 이동되는 element는 그렇지 않다.

• 그리고 documentFragment는 innerHTML이 없는데, documentFragment에 appendChild로 div element를 create해서 추가한뒤 selector로 접근해서 innerHTML를 사용할 수 있다.

const elem = document.createElement('div');
const docFrag = document.createDocumentFragment();

docFrag.appendChild(elem);
docFrag.querySelector('div').innerHTML = '<p>zz</p>'