<script>
for (let i = 0; i < 10; i++) {
let divEl = document.createElement('div');
divEl.innerText = 'hello~ this is ' + i;
document.body.appendChild(divEl);
}
</script>
<script>
const docFrag = document.createDocumentFragment();
// const docFrag = document.createElement('div');
for (let i = 0; i < 10; i++) {
let divEl = document.createElement('div');
divEl.innerText = 'hello~ this is ' + i;
docFrag.appendChild(divEl);
}
document.body.appendChild(docFrag);
</script>
DocumentFragment 만들고 하는 것과 , div를 하나 만들어서 하는 것과 무엇이 다른가?
div 태그로 만들었다면
자식 요소들을 만들기 위해 어쩔수 없이 같이 생겨난 부모 div
DocumentFragment로 만들었다면
부모 요소 없이, 만들고자 했던 부분들만 생겨났다.
DocumentFragment를 DOM 노드에 추가한다고 해도 DocumentFragment 노드는 등록되지 않는다
그 자식 노드들만 추가 된다
DocumentFragment DOM에 추가하면 DocumentFragment 노드의 자식 요소들은 더이상 메모리 상에 존재하지 않는다
확인하기 : body에 붙이기 전, 후를 비교해보자
자동으로 자식 요소들이 삭제 되어 메모리 상에 존재하지 않는다!
div 였다면?
자식 요소들이 그대로 남아 메모리 상에 존재한다.
여러개의 각기 다른 부모 요소에 요소를 집어 넣을 때 효율적
1번
cloneNode() 메서드를 활용하여 요소 자체를 복사하자
각 div 마다 100개의 요소가 생긴다.
2번 document.createDocumentFragment() 사용해보기
DocumentFragment를 DOM에 추가할 때, DocumentFragment의 자식 노드는 더 이상 생성한 메모리 상의 위치에 존재하지 않기 때문에 유지하고 싶다면 사용할 것
cloneNode를 하지 않으면 appendChild 이후 최종적으로 아무것도 남지 않지만