Phương pháp HTML DOM Document createDocumentFragment()

Định nghĩa và cách sử dụng

createDocumentFragment() Phương pháp này tạo ra nút offscreen.

Các nút offscreen có thể được sử dụng để xây dựng đoạn văn bản document fragment mới có thể chèn vào bất kỳ văn bản nào.

createDocumentFragment() Phương pháp này cũng có thể được sử dụng để trích xuất một phần nội dung của văn bản, thay đổi, thêm hoặc xóa một số nội dung, và chèn lại vào văn bản.

Lưu ý:

Bạn luôn có thể trực tiếp chỉnh sửa phần tử HTML. Nhưng phương pháp tốt hơn là xây dựng (offscreen) đoạn văn bản document fragment và thêm đoạn này vào DOM thực tế (hoạt động) khi đã sẵn sàng. Bởi vì bạn thêm đoạn sau khi đã sẵn sàng, vì vậy chỉ cần một lần sắp xếp và một lần vẽ.

Nếu bạn muốn thêm các phần tử HTML vào vòng lặp, việc sử dụng đoạn văn bản document fragment cũng có thể cải thiện hiệu suất.

Lưu ý:Các nút văn bản được thêm vào đoạn văn bản document fragment sẽ bị xóa khỏi văn bản gốc.

Mô hình

Ví dụ 1

Thêm phần tử vào danh sách trống:

const fruits = ["Banana", "Orange", "Mango"];
// Tạo đoạn văn bản document fragment:
const dFrag = document.createDocumentFragment();
// Thêm phần tử li vào đoạn:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Thêm đoạn vào danh sách:
document.getElementById('myList').appendChild(dFrag);

Thử ngay

Ví dụ 2

Thêm phần tử vào danh sách hiện có:

const fruits = ["Banana", "Orange", "Mango"];
// Tạo đoạn văn bản document fragment:
const dFrag = document.createDocumentFragment();
// Thêm phần tử li vào đoạn:
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}
// Thêm đoạn vào danh sách:
document.getElementById('myList').appendChild(dFrag);

Thử ngay

Cú pháp

document.createDocumentFragment()

Tham số

Không có.

Trả về giá trị

Loại Mô tả
Nút DocumentFragment mới tạo không có phần tử con.

Hỗ trợ trình duyệt

document.createComment() Là tính năng của DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ