document.createDocumentFragment

<aside> 💡 DOM에서 태그는 실제로 스크립트를 이용해 어딘가에 붙여넣기 전까지는 화면에 보이지않는 HTML 조각이라고 하셨는데, 이 HTML 조각을 사용하는 주된 이유가 뭔가요? HTML fragment라고 구글링해봤는데 이게 언제 사용되는건지 모르겠어서요. (스크립트를 이용해 붙여넣기 전까지 화면에 보이지 않는다는 게 그 때까지는 작동하지 않는다는 건가요?)

</aside>

https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment

Creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree.

자바스크립트에서 만들어진 DOM nodes(createElement나 기타 자바스크립트 메소드를 통해 만든 HTML 엘리먼트들...)이 추가될 수 있도록 준비된 최소한의 것 이라고 생각해주시면 될 것 같습니다.

div tag에 새로운 HTML element를 추가해서 appendChild 메소드를 사용해 넣을 수도 있겠지만DocumentFragment를 사용하면 따로 생성되는 HTML element가 없이 추가되지 않는 차이가 있어,코드량이 조금 줄게 됩니다. (MDN 한국어는 오역이 좀 있네요.)

실제 활용법은 다음과 같습니다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <span id="here"></span>

    <script src="index.js"></script>
  </body>
</html>

index.js

const fragment = document.createDocumentFragment();
const li = document.createElement("li");
li.textContent = "I'm li element";
const p = document.createElement("p");
p.textContent = "I'm p element";
fragment.appendChild(li);
fragment.appendChild(p);

const here = document.querySelector("#here");
here.appendChild(fragment);