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

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

$('#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 回答