DocumentFragment

DocumentFragment는 여러 노드드로 구성된 그룹을 감싸 다른 곳으로 전달하게 해주는 임시 컨테이너 역활을하며 DocumentFragment를 문서 어딘가에 삽입하면 DocumentFragment는 사라지고 DocumentFragment에 추가한 노드들만 남는다.

<ul id="ul"></ul>

<script>
function getListContent() {
  let fragment = new DocumentFragment();

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    fragment.append(li);
  }

  return fragment;
}

ul.append(getListContent()); // (*)
</script>

<ul id="ul"></ul>

<script>
function getListContent() {
  let result = [];

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    result.push(li);
  }

  return result;
}

ul.append(...getListContent()); // append 메서드와 ...(전개 문법)은 궁합이 잘 맞습니다.
</script>

배열을 사용하고 append에 스프레드문법을 사용하면 DocumentFragment와 같은 효과를 얻을 수 있지만 배열이 참조로 남는 단점은 있다.