Документ Фрагмент теряет содержимое после 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 

Это работает хорошо, но, когда я иду, чтобы заполнить свой 2--е выпадающий с тем же значениями, фрагмент в настоящее время не имеет какое-либо содержание

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

Demo JSFiddle: Here

Я попробовал альтернативный подход, который работает, то, что я хочу знать, - это то, как и почему фрагмент документа теряется после innerHTML()?

Answer 1

, что здесь происходит is..the фрагмент документа создается в памяти, а не в DOMtree так, как только вы добавляете фрагмент .. он исчезает ... это всегда лучше использовать клон фрагмента, созданного ..so вы можете использовать фрагмент, созданный несколько раз и на самом деле, добавление клона ..

// 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());