fragment(createDocumentFragment)

 

fragment는 dom을 담는 그릇이다.

<ul class="list"></ul>

위와 같은 html이 있을 때, ul.list 안쪽에 li를 추가하려면

const docFragment = document.createDocumentFragment();
const arr = ['a','b','c'];

for(let i = 0;i < arr.length;i++){
	const li = document.createElement('li'); // element를 가상으로 만들어준다.
    li.innerText = arr[i]; //  arr의 문자를 li 안쪽에 추가해준다.
    docFragment.appendChild(li); // 만들어 둔 fragment에 li element를 추가해준다.
}

document.querySelector('ul.list').appendChild(docFragment); // 마지막으로 ul.list에 추가

 

이렇게 추가하면

<ul class="list">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

위와 같은 dom을 얻을 수 있다.