HTML DOM 문서 createDocumentFragment()
예
빈 목록에 요소 추가:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
기존 목록에 요소 추가:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
정의 및 사용
이 createDocumentFragment()메서드는 오프스크린 노드를 만듭니다.
오프스크린 노드는 모든 문서에 삽입할 수 있는 새 문서 조각을 작성하는 데 사용할 수 있습니다.
이 createDocumentFragment()방법을 사용하여 문서의 일부를 추출하고, 일부 내용을 변경, 추가 또는 삭제하고 문서에 다시 삽입할 수도 있습니다.
메모
언제든지 HTML 요소를 직접 편집할 수 있습니다. 그러나 더 나은 방법은 (오프스크린) 문서 조각을 구성하고 준비가 되면 이 조각을 실제(라이브) DOM에 첨부하는 것입니다. 준비가 되었을 때 조각을 삽입하기 때문에 한 번의 리플로우와 한 번의 렌더링만 있을 것입니다.
루프에 HTML 요소 항목을 추가하려는 경우 문서 조각을 사용하면 성능도 향상됩니다.
경고!
문서 조각에 추가된 문서 노드는 원본 문서에서 제거됩니다.
통사론
document.createDocumentFragment()
매개변수
| 없음 |
반환 값
| 유형 | 설명 |
| 마디 | 생성된 DocumentFragment 노드. |
브라우저 지원
document.createComment()DOM 레벨 1(1998) 기능입니다.
모든 브라우저에서 완벽하게 지원됩니다.
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |