DocumentFragment 노드를 생성해서 사용하면 라이브 DOM 외부에 경량화된 문서 DOM을 만들 수 있습니다.
문서에 요소를 직접적으로 추가하면 브라우저가 그 때마다 페이지에 정보를 반영하고 렌더링 해야 하므로 DocumentFragment를 사용하여 라이브 DOM에 추가하는 것이 좋습니다.

실제 라이브 DOM에서 추가하는 것과의 차이점은 아래와 같습니다.

• 어떤 종류의 노드도 가질 수 있습니다.
• 라이브 DOM에 추가될 때, 복사되는 형태가 아닌 이전 되는 형태가 됩니다. 생성한 메모리 위치에 존재하지 않습니다.

라이브 DOM에 추가하기 1

ul 태그에 li 태그를 추가하여 번호를 출력하는 예제입니다.

<script>
    var fragment = document.createDocumentFragment();
    var ul = document.getElementById('myList');
    var li = null;

    for (var i = 0; i < 3; i++) {
        li = document.createElement('li');
        li.appendChild(document.createTextNode("Item = " + (i+1)))
        fragment.appendChild(li);
    }
    ul.appendChild(fragment);
</script>

라이브 DOM에 추가하기 2

위 예제로 복잡한 DOM 구성을 추가하기에는 어려울 수 있습니다.
그래서 fragment에 div를 추가한다음, innerHTML 속성을 사용합니다.

<script>
    var divElm = document.createElement('div');
    var docFrag = document.createDocumentFragment();

    docFrag.appendChild(divElm);
    docFrag.querySelector('div').innerHTML = "<ul><li>Foo</li><li>Bar</li></ul>";

    document.querySelector('div').appendChild(docFrag);
</script>

라이브 DOM에 복제하여 추가하기

위 예제들은 라이브 DOM에 이동되는 형태입니다.
하지만 cloneNode를 활용하여 메모리상에 유지할 수도 있습니다.

<script>
    var ul = document.querySelector('ul');
    var f = document.createDocumentFragment();

    ['apple','orange','banana'].forEach(function (e) {
        var li = document.createElement('li');
        li.textContent = e;
        f.appendChild(li);
    });

    ul.appendChild(f.cloneNode(true));
</script>