Metode HTML DOM Document createDocumentFragment()

Definisi dan penggunaan

createDocumentFragment() Metode ini membuat node offscreen.

Node offscreen dapat digunakan untuk membangun fragmen dokumen baru yang dapat disisipkan ke mana saja dokumen.

createDocumentFragment() Metode ini juga dapat digunakan untuk mengekstrak bagian konten dokumen, mengubah, menambah, atau menghapus beberapa konten, dan memasukkannya kembali ke dokumen.

Petikan

Anda selalu dapat mengedit langsung elemen HTML. Tetapi cara yang lebih baik adalah membangun (offscreen) fragmen dokumen dan menambahkan fragmen ini ke DOM yang sebenarnya (aktif) saat siap. Karena Anda menambahkan fragmen setelah fragmen siap, maka hanya ada satu pengaturan ulang dan penggambaran sekali.

Jika Anda ingin menambahkan item elemen HTML dalam loop, penggunaan fragmen dokumen juga dapat meningkatkan performa.

Perhatian:Node dokumen yang ditambahkan ke fragmen dokumen akan dihapus dari dokumen asli.

Contoh

Contoh 1

Tambahkan elemen ke dalam daftar kosong:

const fruits = ["Banana", "Orange", "Mango"];
// Buat fragmen dokumen:
const dFrag = document.createDocumentFragment();
// Tambahkan elemen li ke dalam fragmen:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Tambahkan fragmen ke dalam daftar:
document.getElementById('myList').appendChild(dFrag);

Coba sendiri

Contoh 2

Tambahkan elemen ke dalam daftar yang sudah ada:

const fruits = ["Banana", "Orange", "Mango"];
// Buat fragmen dokumen:
const dFrag = document.createDocumentFragment();
// Tambahkan elemen li ke dalam fragmen:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Tambahkan fragmen ke dalam daftar:
document.getElementById('myList').appendChild(dFrag);

Coba sendiri

Sintaks

document.createDocumentFragment()

Parameter

Tiada.

Kembalian

Jenis Deskripsi
Nod DocumentFragment yang baru dibuat, tanpa node anak.

Dukungan pelayar

document.createComment() adalah fitur DOM Level 1 (1998).

Semua pelayar mendukungnya:

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