createDocumentFragment()

DocumentFragment는 다른 노드를 담는 임시 컨테이너 역할을 하는 특수 목적의 노드이다. 가상의 노드 객체로서, 메모리상에서만 존재하는 비 문서 탬플릿으로 생각하면 된다. parentNode 프로퍼티는 항상 null이다. 하지만 Element처럼, appendChild()와 insertBefore() 등으로 조작할 수 있는 자손 객체를 가질 수 있다.

// 노드 n의 자손 객체를 역순 정렬
function reverse( n ) {
  //임시 컨테이너로 사용할 빈 DocumentFragment를 생성한다.
  var f = document.createDocumentFragment();
   //n의 자식 객체를 역순으로 루프를 돌려서 f로 옮긴다.
    //n의 마지막 자식 객체는 f의 첫 번째 자식 객체가 되고 반대로 첫 객체는 마지막 객체가 된다.
    //주의할 것은 f에 추가하면 n에서는 지워진다는 점이다.

while(n.lastChild) {
  f.appendChild(n.lastChild);
};

//끝으로 다시 f의 모든 자식 객체를 n으로 한번에 보낸다.
n.appendChild(f);

}

사용 예시

var toAdd = document.createDocumentFragment();
for(var i=0; i < 11; i++){
   var newDiv = document.createElement('div');
   newDiv.id = 'r'+i;
   newDiv.className = 'ansbox';
   toAdd.appendChild(newDiv);
}

document.appendChild(toAdd);

---

참고자료

▶createDocumentFragment()
▶루프를 사용하여 div 만들기