HTML DOM Document createDocumentFragment ()
Các ví dụ
Thêm các phần tử vào danh sách trống:
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);
Thêm các phần tử vào danh sách hiện có:
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);
Định nghĩa và Cách sử dụng
Phương createDocumentFragment()thức tạo một nút ngoài màn hình.
Nút ngoài màn hình có thể được sử dụng để tạo một phân đoạn tài liệu mới có thể chèn vào bất kỳ tài liệu nào.
Phương createDocumentFragment()pháp này cũng có thể được sử dụng để trích xuất các phần của tài liệu, thay đổi, thêm hoặc xóa một số nội dung và chèn trở lại tài liệu.
Ghi chú
Bạn luôn có thể chỉnh sửa trực tiếp các phần tử HTML. Nhưng một cách tốt hơn là tạo một phân đoạn tài liệu (ngoài màn hình) và đính kèm phân đoạn này vào DOM thực (trực tiếp) khi nó sẵn sàng. Bởi vì bạn chèn đoạn khi nó đã sẵn sàng, sẽ chỉ có một lần chỉnh lại và một lần hiển thị duy nhất.
Nếu bạn muốn nối các mục phần tử HTML trong một vòng lặp, việc sử dụng các đoạn tài liệu cũng cải thiện hiệu suất.
Cảnh báo!
Các nút tài liệu được nối vào phân đoạn tài liệu, sẽ bị xóa khỏi tài liệu gốc.
Cú pháp
document.createDocumentFragment()
Thông số
| KHÔNG AI |
Giá trị trả lại
| Loại | Sự miêu tả |
| Nút | Nút DocumentFragment đã tạo. |
Hỗ trợ trình duyệt
document.createComment() là một tính năng DOM Level 1 (1998).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |