この投稿は、createElement()ではなくcreateDocumentFragment()を理解するのに最も役立ちました。document.createDocumentFragment またはdocument.createElementを使用する必要があります。
パフォーマンス上の理由から、フラグメントを使用すると大きなデータセットに役立つことを理解したので、関数を変換したいと思います。
これは私が現在使用しているものであり、希望どおりに機能します=> ajaxを使用してphpファイルからコンテンツを取得し、このコンテンツを新しい(XMLHTTP / ACTIVE OBJECT)内の既存のコンテンツの先頭に追加しますdiv#wrapper
div.feedBox
r
r.onreadystatechange=function(){
if(r.readyState==4 && r.status==200){
//Want to convert this to createDocumentFrangment --START
var n = document.createElement("div");
n.className = "feedBox";
n.innerHTML = r.responseText;
document.getElementById("wrapper").insertBefore(n, document.getElementById("wrapper").firstChild);
//Want to convert this to createDocumentFrangment --END
}
}
これは私が試したものですが、何が起こるかというと、コンテンツは追加されますが、div.feedBoxはありません
var n = document.createElement("div");
n.className = "feedBox";
n.innerHTML = r.responseText;
var f = document.createDocumentFragment();
while (n.firstChild) { f.appendChild(n.firstChild); }
document.getElementById("wrapper").insertBefore(f, document.getElementById("wrapper").firstChild);
私は何を取りこぼしたか?それを機能させる理由と方法を説明できますか?これは本当にこれを行うためのより効率的な方法ですか?
PS:jqueryは使用しないでください。私はそれをよく知っていて、他のプロジェクトで広く使用していますが、これをできるだけ小さく/軽量/効率的にしたいと思っています。