Question

我在线阅读，以防止频繁的回流，并且每当我们可以使用文档片段时修改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

这很好但是，当我用相同的值填充我的第二个下拉列表时，片段现在没有任何内容

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

演示JSFiddle：Here

我尝试了一种替代方法也是有效的，我想知道的是在innerHTML（）之后文档片段松散内容的方式和原因？

Answer 1

这里发生的是......文档片段是在内存中创建的，而不是在DOMtree中创建的，所以一旦你追加片段......它就会消失......使用片段创建的克隆总是更好..所以你可以使用片段创建多次，实际上，附加克隆..

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

fiddle此处

site可能会有所帮助

Answer 2

I think this should be done this way:

$('#list2').html($('#list').children().clone());

文档片段在innerHTML之后丢失内容

2 个答案: