HTML DOM createDocumentFragment() 메서드는 문서 조각을 만드는 데 사용됩니다. 문서 조각은 메모리에 상주하므로 DOM 구조에 영향을 주지 않습니다. DOM에 문서 단편을 추가하면 기본적으로 하위 항목으로 대체됩니다. 즉, 문서에 문서 단편이 추가되지 않고 하위 항목만 추가됩니다.

구문

다음은 createDocumentFragment() 메서드의 구문입니다. -

document.createDocumentFragment()

documentFragment 노드를 나타내는 DocumentFragment 객체를 반환합니다.

예시

HTML DOM createDocumentFragment() 메서드의 예를 살펴보겠습니다. -

createDocumentFragment() 예제

createDocumentFragment 메서드를 사용하여 목록 항목을 변경하려면 아래 버튼을 클릭하세요.
CHANGE
망고
복숭아
구아바
딸기파파야

출력

이것은 다음과 같은 출력을 생성합니다 -

CHANGE 버튼을 클릭하면 -

위의 예에서 -

5개의 목록 항목으로 정렬되지 않은 목록을 만들었습니다 -

망고
복숭아
구아바
딸기
파파야

 

 그런 다음 사용자가 클릭할 때 changeList() 메서드를 실행하는 CHANGE 버튼을 만들었습니다. 
 
변경
 

 changeList() 함수는 문서 객체의 createDocumentFragment() 메서드를 사용하여 문서 조각을 만들고 변수 x에 할당합니다. appnedChild() 메서드를 사용하여 목록 요소를 문서 조각의 자식으로 만듭니다. 문서 조각 안에 있는 첫 번째 목록 요소 값을 "Watermelon"으로 설정합니다. 그런 다음 문서 조각을
의 마지막 자식으로 추가합니다. 
함수 changeList() { var x=document.createDocumentFragment(); x.appendChild(document.getElementsByTagName("LI")[0]); x.childNodes[0].childNodes[0].nodeValue ="수박"; document.getElementsByTagName("UL")[0].appendChild(x);}