javascriptで複数のDOMを一度に追加する方法

今まで知らなかったのでメモ。

#document.createDocumentFragmentを使う

var fragment = document.createDocumentFragment();

for ( var i = 0,len = data.length; i < len; i++ ) {
  var li = document.createElement('li');
  li.textContent = data[i];

  fragment.appendChild(li);
}

element.appendChild(fragment);

どうやら見た目には反映しないDOMツリーを生成してくれる模様。レジ袋みたいな。

https://html5experts.jp/yoshikawa_t/1932/