javascript - innerHTML 后文档片段丢失内容

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这可能有帮助