Rekomendasi kursus:

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:

document.getElementById('myList').appendChild(dFrag);

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