1

オンラインで読んで、頻繁なリフローを防ぎ、ドキュメントフラグメントを使用できるたびにDOMを変更するので、そのアプローチを採用し、2つのドロップダウンに同じコンテンツ（実際には1990年から2013年までの年数が含まれています）を入力したいと思いました。

var fragment = document.createDocumentFragment();
    for(var i=1;i<=10;i++){
    var choice = document.createElement('option');
        choice.value = i;
        choice.innerHTML = i;
        fragment.appendChild(choice);
    }
$('#list').html(fragment);     //Populates #list with values 1-10

これは正常に機能しますが、2番目のドロップダウンに同じ値を入力すると、フラグメントにコンテンツが含まれなくなります

$('#list2').html(fragment);    // Does not populate #list2

デモJSFiddle：ここ

私もうまくいく別のアプローチを試しました、私が知りたいのは、innerHTML（）の後にドキュメントフラグメントがコンテンツを失う方法と理由です？

4

2 に答える 2

3

ここで何が起こるかというと、ドキュメントフラグメントはDOMtreeではなくメモリに作成されるため、フラグメントを追加すると消えます...作成されたフラグメントのクローンを使用することをお勧めします。作成されたフラグメントを使用できます。複数回、実際には、クローンを追加します。

// fragment.cloneNode(true)
 $('#list').html(fragment.cloneNode(true));
 $('#list2').html(fragment.cloneNode(true));

ここをいじる

役立つかもしれないサイト

于 2013-02-20T06:58:28.293 に答える
0

私はこれがこのように行われるべきだと思います：

$('#list2').html($('#list').children().clone());
于 2013-02-20T06:51:49.327 に答える