HTML DOM Document createDocumentFragment() yöntemi

Tanım ve kullanım

createDocumentFragment() Bu yöntem offscreen düğüm oluşturur.

Offscreen düğümler, herhangi bir dokümana eklenebilecek yeni belge fragmanları oluşturmak için kullanılabilir.

createDocumentFragment() Bu yöntem, belgenin bir kısmını çıkarmak, değiştirmek, eklemek veya belirli içerikleri silmek ve ardından bu içerikleri dokümana geri eklemek için de kullanılabilir.

İpucu

HTML elementlerini doğrudan düzenleyebilirsiniz. Ancak, daha iyi bir yöntem, (offscreen) belge fragmanı oluşturmak ve bu fragmanı hazır olduğunuzda gerçek (aktif) DOM'a eklemektir. Çünkü fragmanı hazır olduğunuzda ekliyorsunuz, bu yüzden sadece bir yeniden düzenleme ve bir render yapmanız gerekecek.

HTML elementi öğelerini döngü içinde eklemek için, belge fragmanını kullanmak da performansı artırabilir.

Dikkat:Doküman düğümü, eklendikten sonra orijinal dokümandan kaldırılır.

Örnek

Örnek 1

Boş listede eleman ekleyin:

const fruits = ['Banana', 'Orange', 'Mango'];
// Doküman fragmanı oluşturun:
const dFrag = document.createDocumentFragment();
// li elementini fragmana ekleyin:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Fragmanı listeye ekleyin:
document.getElementById('myList').appendChild(dFrag);

Kişisel olarak deneyin

Örnek 2

Mevcut listede eleman ekleyin:

const fruits = ['Banana', 'Orange', 'Mango'];
// Doküman fragmanı oluşturun:
const dFrag = document.createDocumentFragment();
// li elementini fragmana ekleyin:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Fragmanı listeye ekleyin:
document.getElementById('myList').appendChild(dFrag);

Kişisel olarak deneyin

Sözdizimi

document.createDocumentFragment()

Parametreler

Yok.

Geri değer

Tür Açıklama
Düğüm Yeni oluşturulan DocumentFragment düğümü, alt düğüm yoktur.

Tarayıcı desteği

document.createComment() Bu, DOM Level 1 (1998) özellikleridir.

Tüm tarayıcılar tarafından desteklenir:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek 9-11 Destek Destek Destek Destek