HTML DOM Document createDocumentFragment() 메서드

정의와 사용법

createDocumentFragment() 메서드는 offscreen 노드를 생성합니다.

offscreen 노드는 다른 문서에 삽입할 수 있는 새 문서 문단을 구축하는 데 사용될 수 있습니다.

createDocumentFragment() 이 메서드는 문서의 일부 내용을 추출하고, 변경하고, 추가하고, 일부 내용을 제거하여 문서에 다시 삽입하는 데도 사용될 수 있습니다.

추천

HTML 요소를 직접 편집할 수는 있지만, 더 나은方法是 (offscreen) 문서 문단을 구축하고 준비되면 이 문단을 실제 (활성) DOM에 추가하는 것이 좋습니다. 왜냐하면 문단을 준비한 후에 문단을 삽입하기 때문에 재정렬과 재랜더링은 단 한 번만 필요합니다.

루프에서 HTML 요소 항목을 추가하려면, 문서 문단을 사용하여 성능을 향상시킬 수도 있습니다.

주의:문서 문단에 추가된 문서 노드는 원래 문서에서 제거됩니다.

인스턴스

예제 1

요소를 비어 있는 목록에 추가하십시오:

const fruits = ['Banana', 'Orange', 'Mango'];
// 문서 문단을 생성하십시오：
const dFrag = document.createDocumentFragment();
// li 요소를 문단에 추가하십시오：
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// 문단을 목록에 추가하십시오：
document.getElementById('myList').appendChild(dFrag);

직접 시도해보세요

예제 2

요소를 기존 목록에 추가하십시오:

const fruits = ['Banana', 'Orange', 'Mango'];
// 문서 문단을 생성하십시오：
const dFrag = document.createDocumentFragment();
// li 요소를 문단에 추가하십시오：
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// 문단을 목록에 추가하십시오：
document.getElementById('myList').appendChild(dFrag);

직접 시도해보세요

문법

document.createDocumentFragment()

매개변수

없음.

반환 값

타입 설명
노드 새로 생성된 DocumentFragment 노드는 자식 노드가 없습니다.

브라우저 지원

document.createComment() 은 DOM Level 1 (1998) 특성입니다.

모든 브라우저에서 지원됩니다：

크롬 IE 에지 파이어폭스 사파리 오페라
크롬 IE 에지 파이어폭스 사파리 오페라
지원 9-11 지원 지원 지원 지원