0

この投稿は、createElement（）ではなくcreateDocumentFragment（）を理解するのに最も役立ちました。document.createDocumentFragment またはdocument.createElementを使用する必要があります。

パフォーマンス上の理由から、フラグメントを使用すると大きなデータセットに役立つことを理解したので、関数を変換したいと思います。

これは私が現在使用しているものであり、希望どおりに機能します=> ajaxを使用してphpファイルからコンテンツを取得し、このコンテンツを新しい（XMLHTTP / ACTIVE OBJECT）内の既存のコンテンツの先頭に追加しますdiv#wrapperdiv.feedBoxr

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は使用しないでください。私はそれをよく知っていて、他のプロジェクトで広く使用していますが、これをできるだけ小さく/軽量/効率的にしたいと思っています。

4

2 に答える 2

2

この行はいけませんか

while (n.firstChild) { f.appendChild(n.firstChild);

なれ

f.appendChild(n);

div.feedBoxまた、どこにもDOMに追加していないことがわかります..

.. ..while condition failsに何も追加していない場合はどうなりますかDOM

私はこれがうまくいくと仮定しています..しかしテストされていません

f.appendChild(n)
document.getElementById("wrapper").appendChild(f,        
                                 document.getElementById("wrapper").firstChild);

また、使用する方が良い

.appendChild(f, それ以外の .insertBefore(f,

フィドルをチェック

于 2012-11-15T22:15:55.423 に答える
0

これは完全に機能する機能です。誰でも自由に使用してください。

function ajax_fragment(php_file){
    if (window.XMLHttpRequest){
        r=new XMLHttpRequest(); 
    } else{ 
        r=new ActiveXObject("Microsoft.XMLHTTP"); 
    }

    r.onreadystatechange=function(){
        if(r.readyState==4 && r.status==200){
            var n = document.createElement("div");       //Create a div to hold the content
            n.className = "feedBox";                     //Give a class 'feddBox' to the div
            n.innerHTML = r.responseText;                //Put the response in the div
            var f = document.createDocumentFragment();   //Create the fragment
            f.appendChild(n);                            //Add the div to the fragment

            //Append the fragment's content to the TOP of wrapper div.
            document.getElementById("wrapper").insertBefore(f, document.getElementById("wrapper").firstChild);
        }
    }
    r.open("GET",php_file,true); 
    r.send();
}
于 2012-11-15T22:56:00.037 に答える