Rekomendasi kursus:
- Halaman Sebelumnya createComment()
- Halaman Berikutnya createElement()
- Kembali ke Timpang Documents DOM HTML
Metode HTML DOM Document createDocumentFragment()
Node offscreen dapat digunakan untuk membangun bagian dokumen baru yang dapat disisipkan ke dalam dokumen apapun.
Definisi dan penggunaan
Metode ini membuat node offscreen.
Node offscreen dapat digunakan untuk membangun bagian dokumen baru yang dapat disisipkan ke dalam dokumen apapun.
createDocumentFragment()
Metode ini juga dapat digunakan untuk mengekstrak bagian konten dokumen, mengubah, menambah, atau menghapus beberapa konten, dan memasukkannya kembali ke dokumen.
Panduan
Anda selalu dapat mengedit langsung elemen HTML. Tetapi cara yang lebih baik adalah membangun (offscreen) bagian dokumen dan menambahkannya ke DOM yang sebenarnya (aktif) saat siap. Karena Anda menambahkan bagian saat bagian siap, maka hanya ada satu pengaturan ulang dan penggambaran.
Jika Anda ingin menambahkan item elemen HTML dalam lingkungan perulangan, penggunaan bagian dokumen juga dapat meningkatkan kinerja.Perhatian:
Node dokumen yang ditambahkan ke bagian dokumen akan dihapus dari dokumen asli.
Contoh
Contoh 1
Menambahkan elemen ke dalam daftar yang sudah ada: const fruits = ["Banana", "Orange", "Mango"]; // Membuat bagian dokumen: const dFrag = document.createDocumentFragment(); // Menambahkan elemen li ke dalam bagian: for (let x in fruits) { const li = document.createElement('li'); li.textContent = fruits[x]; dFrag.appendChild(li); } // Menambahkan bagian ke dalam daftar:
document.getElementById('myList').appendChild(dFrag);
Menambahkan elemen ke dalam daftar kosong:
Contoh 2
Menambahkan elemen ke dalam daftar yang sudah ada: const fruits = ["Banana", "Orange", "Mango"]; // Membuat bagian dokumen: const dFrag = document.createDocumentFragment(); // Menambahkan elemen li ke dalam bagian: for (let x in fruits) { const li = document.createElement('li'); li.textContent = fruits[x]; dFrag.appendChild(li); } // Menambahkan bagian ke dalam daftar:
Coba sendiri
Syarat
document.createDocumentFragment()
Parameter
Tidak ada.
Tipe | Deskripsi |
---|---|
Node | Node DocumentFragment yang baru dibuat, tanpa node anak. |
Dukungan perpustakaan
document.createComment()
Adalah fitur DOM Level 1 (1998).
Semua peramban mendukungnya:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
Dukungan | 9-11 | Dukungan | Dukungan | Dukungan | Dukungan |
- Halaman Sebelumnya createComment()
- Halaman Berikutnya createElement()
- Kembali ke Timpang Documents DOM HTML