document.createElement()로 생성한 뒤, appendChild()를 이용해 바로 DOM에 등록!
<body>
<script>
for(let i=0; i<10; i++) {
let divEl = document.createElement('div');
divEl.innerText = 'hello' + i;
document.body.appendChild(divEl);
// body 태그에 만든 div요소를 바로 붙여넣음
}
</script>
</body>
이 때, DocumentFragment 노드를 사용하면, 오직 메모리상에만 존재하는 경량화된 DOM을 만들 수 있다!
<body>
<script>
const docFrag = document.createDocumentFragment();
// const test = document.createElement('div');
for(let i=0; i<10; i++) {
let divEl = document.createElement('div');
divEl.innerText = 'hello' + i;
docFrag.appendChild(divEl);
// test.appendChild(divEl);
}
console.log(docFrag.childNodes); // 자식 요소들 출력
document.body.appendChild(docFrag);
// => 별 다른 부모 요소없이 원하는 자식 요소들만 dom에 추가할 수 있게 됨!
console.log(docFrag.childNodes); // 자식 요소 X
// document.body.appendChild(test);
// => 요렇게 해버리면 아무 의미없는 부모 요소가 생성되게 됨!
</script>
</body>
=> 이러한 특징 때문에 요소를 여러개의 각기 다른 부모 요소에 집어 넣을 때 더욱 깔끔한 코딩이 가능함!
<body>
<div class="container"/>
<div class="container"/>
<div class="container"/>
<script>
let elements = [];
for(let i=0; i<100; i++) {
conse el = document.createElement('div');
elements.push(el);
}
const cont = document.querySelectorAll(".container");
for(let i=0; i<cont.length; i++) {
for(let j=0; j<elements.length; j++) {
cont[i].appendChild(elements[j].cloneNode(true));
// 이렇게 할시, 배열은 참조 타입이기 때문에 el 자체를 복사할 수 있게끔
}
}
</script>
</body>
<body>
<div class="container"/>
<div class="container"/>
<div class="container"/>
<script>
const frag = document.createDocumentFragment();
let elements = [];
for(let i=0; i<100; i++) {
conse el = document.createElement('div');
elements.push(el);
frag.appendChild(el);
}
const cont = document.querySelectorAll(".container");
for(let i=0; i<cont.length; i++) {
cont[i].appendChild(frag.cloneNode(true));
// 한번에 뽝 자식 생성!
}
</script>
</body>