HTML DOM Belgesi createDocumentFragment()
Örnekler
Boş bir listeye öğe ekleyin:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
Mevcut bir listeye öğe ekleyin:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const fragment = document.createDocumentFragment();
// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}
// Add fragment to a list:
document.getElementById('myList').appendChild(fragment);
Tanım ve Kullanım
Yöntem createDocumentFragment()
, bir ekran dışı düğüm oluşturur.
Ekran dışı düğüm, herhangi bir belgeye eklenebilecek yeni bir belge parçası oluşturmak için kullanılabilir.
Yöntem createDocumentFragment()
ayrıca bir belgenin bölümlerini çıkarmak, içeriğin bir kısmını değiştirmek, eklemek veya silmek ve belgeye geri eklemek için de kullanılabilir.
Not
HTML öğelerini her zaman doğrudan düzenleyebilirsiniz. Ancak (ekran dışı) bir belge parçası oluşturmak ve bu parçayı hazır olduğunda gerçek (canlı) DOM'ye eklemek daha iyi bir yoldur. Parçayı hazır olduğunda eklediğiniz için yalnızca bir yeniden akış ve bir tek oluşturma olacaktır.
Bir döngüde HTML öğeleri öğeleri eklemek istiyorsanız, belge parçalarını kullanmak performansı da artırır.
Uyarı!
Belge parçasına eklenen belge düğümleri, orijinal belgeden kaldırılır.
Sözdizimi
document.createDocumentFragment()
parametreler
YOK |
Geri dönüş değeri
Tip | Açıklama |
düğüm | Oluşturulan DocumentFragment düğümü. |
Tarayıcı Desteği
document.createComment()
bir DOM Düzey 1 (1998) özelliğidir.
Tüm tarayıcılarda tam olarak desteklenir:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |