Dokumen HTML DOM createDocumentFragment()
Contoh
Tambahkan elemen ke daftar kosong:
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);
Tambahkan elemen ke daftar yang ada:
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);
Definisi dan Penggunaan
Metode createDocumentFragment()ini membuat simpul di luar layar.
Node di luar layar dapat digunakan untuk membuat fragmen dokumen baru yang dapat dimasukkan ke dalam dokumen apa pun.
Metode createDocumentFragment()ini juga dapat digunakan untuk mengekstrak bagian dokumen, mengubah, menambah, atau menghapus beberapa konten, dan menyisipkannya kembali ke dokumen.
Catatan
Anda selalu dapat mengedit elemen HTML secara langsung. Tetapi cara yang lebih baik adalah dengan membuat fragmen dokumen (di luar layar), dan melampirkan fragmen ini ke DOM (langsung) yang sebenarnya ketika sudah siap. Karena Anda memasukkan fragmen saat sudah siap, hanya akan ada satu reflow dan satu render.
Jika Anda ingin menambahkan item elemen HTML dalam satu lingkaran, menggunakan fragmen dokumen juga meningkatkan kinerja.
Peringatan!
Node dokumen yang ditambahkan ke fragmen dokumen, dihapus dari dokumen asli.
Sintaksis
document.createDocumentFragment()
Parameter
| TIDAK ADA |
Nilai Kembali
| Jenis | Keterangan |
| simpul | Node DocumentFragment yang dibuat. |
Dukungan Peramban
document.createComment()adalah fitur DOM Level 1 (1998).
Ini didukung penuh di semua browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |