Belge parçası VS eklenmemiş tanımlı oluşturuldu

Question

DOM'da birden çok isabeti önlemek için bir belge parçası veya eklenmemiş bir oluşturulmuş div kullanımı arasında bir fark var mı?

en biz 100 liste öğeleri oluşturmak için söyleyelim

...

Bizim sayfanın içeriği:

<ul class="list"></ul> 

Senaryo 1: belge parçası

Bu senaryoda, biz' li'yi yaratıp, basit bir metinle doldurup, parçalara ekleyerek. Döngü bittiğinde, parça listeye eklenir. DOM 100x'lere ping atmaktan kaçınıyoruz ve sadece parçayı eklemek için bir kez ping ediyoruz.

var frag = document.createDocumentFragment(); 
for(var i = 1; i <= 100; i++) { 
    var li = document.createElement('li'); 
    li.textContent = 'Item #' + i; 
    frag.append(li); 
} 

document.querySelector('.list').appendChild(frag); 

Senaryo 2: Bu DOM'da olmadığından bu senaryoda un-eklenen div

, biz belge parçası gibi bir div görür oluşturun. Tüm oluşturulan li'si div'a ekliyoruz, sonra div'in içeriğini DOM'daki listeye ekliyoruz.

var div = document.createElement('div'); 
for(var i = 1; i <= 100; i++) { 
    var li = document.createElement('li'); 
    li.textContent = 'Item #' + i; 
    div.append(li); 
} 

document.querySelector('.list').innerHTML = div.innerHTML; 

Bu iki senaryo arasındaki fark nedir? DOM'a defalarca ping atmaktan kaçınmak için, her ikisinin de aynı sonucu elde ettiği görülmektedir.

Answer 1

İkinci örnek çalışmaz.
appendChild işlevi bir nesneyi kabul etmelidir, ancak div.innerHTML bir dize döndürmelidir.

document.querySelector('.list').appendChild(div); 

Ama bu da div eklemek olacaktır:

Ne yapabilirsiniz budur. Bu nedenle, html yapınızı bozabilecek bir sarmalayıcı eleman olmadan birden fazla öğeyi bir kerede ekleyebilmek için parçanın mevcut olmasının nedeni budur.

document.querySelector('.list').innerHTML = div.innerHTML; 

Ama sonra varibale li artık DOM'da li eleman başvuru yapmıyor:

Ayrıca bu yapabilirdi. DOM'daki öğeler, div.innerHTML dizesinden oluşturulan yeni öğelerdir. Örneğin, bazı olay dinleyicilerini öğelere eklediyseniz, artık çalışmayacaklar.