[解決済み] document.createDocumentFragmentとdocument.createElementのどちらを使うべきですか？

質問

私は ドキュメントフラグメントについて読んでいます。 や DOM リフローを読んでいて、どのようにすれば document.createDocumentFragment とはどう違うのだろう？ document.createElement とは異なり、DOM 要素に追加するまではどちらも DOM 内に存在しないように見えるからです。

テストを行ったところ (下記)、すべてまったく同じ時間 (約 95 ミリ秒) がかかりました。推測では、これはおそらく、どの要素にもスタイルが適用されていないため、おそらくリフローがないことが原因である可能性があります。

とにかく、以下の例に基づいて、なぜ私は createDocumentFragment の代わりに createElement の代わりに を使用した場合、この2つの違いは何ですか？

var htmz = "<ul>";
for (var i = 0; i < 2001; i++) {
    htmz += '<li><a href="#">link ' + i + '</a></li>';
}
htmz += '<ul>';

//createDocumentFragment
console.time('first');
var div = document.createElement("div");
div.innerHTML = htmz;
var fragment = document.createDocumentFragment();
while (div.firstChild) {
    fragment.appendChild(div.firstChild);
}
$('#first').append(fragment);
console.timeEnd('first');

//createElement
console.time('second');
var span = document.createElement("span");
span.innerHTML = htmz;
$('#second').append(span);
console.timeEnd('second');


//jQuery
console.time('third');
$('#third').append(htmz);
console.timeEnd('third');

どのように解決するのですか？

違いは、ドキュメントフラグメントを DOM に追加すると、事実上消滅してしまうことです。何が起こるかというと、ドキュメント フラグメントのすべての子ノードは、ドキュメント フラグメントを挿入した DOM の位置に挿入され、ドキュメント フラグメント自体は挿入されません。フラグメント自体は存在し続けますが、現在は子ノードがありません。

これにより、複数のノードを同時に DOM に挿入することができます。

var frag = document.createDocumentFragment();
var textNode = frag.appendChild(document.createTextNode("Some text"));
var br = frag.appendChild(document.createElement("br"));
var body = document.body;
body.appendChild(frag);
alert(body.lastChild.tagName); // "BR"
alert(body.lastChild.previousSibling.data); // "Some text"
alert(frag.hasChildNodes()); // false