（Web API ＞ Node）
https://developer.mozilla.org/ja/docs/Web/API/Document/createDocumentFragment
https://uhyohyo.net/javascript/7_4.html
HTMLに対して、要素を追加する場合にはappendChild()などのメソッドを使用するが、それらのメソッドは複数の要素を追加することができない（追加したい要素の数のメソッドを記述することになる）。
複数の要素を追加したい場合には、DocumentFragmentを作成して、それに対して追加したい複数の要素をまとめておいて、一括でappendChild()する方法がよく使われている。
HTMLへ要素を追加する行為はとても重い作業であり、何度も繰り返すことでパフォーマンス面の問題が生じることがある。DocumentFragmentを使うことで、一回の追加で済むので処理速度が上がるというわけである。
const array = ['one', 'two', 'three', 'four'];
const ul = document.querySelectorAll('#list');
const fragment = document.createDocumentFragment()
for(let elem of array) {
const li = document.createElement('li');
li.textContent = elem;
fragment.appendChild(li);
}<!-- 出力結果 ｰｰ>
<ul id="list">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>