Tài liệu HTML DOM createDocumentFragment()
Ví dụ
Thêm phần tử vào danh sách trống:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const dFrag = 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(dFrag);
Hãy tự mình thử »Thêm phần tử vào danh sách hiện có:
const fruits = ["Banana", "Orange", "Mango"];
// Create a document fragment:
const dFrag = 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(dFrag);
Hãy tự mình thử »Sự miêu tả
Phương thức createDocumentFragment()
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 để xây dựng một đ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 thức createDocumentFragment()
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 lại vào 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 cách tốt hơn là tạo một đoạn tài liệu (ngoài màn hình) và đính kèm đ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 nên sẽ chỉ có một lần chỉnh lại dòng và một lần hiển thị duy nhất.
Nếu bạn muốn nối thêm các mục phần tử HTML vào vòng lặp, việc sử dụng các đoạn tài liệu cũng sẽ cải thiện hiệu suất.
Cảnh báo!
Các nút tài liệu được thêm vào đ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 CÓ |
Giá trị trả về
Kiểu | Sự miêu tả |
Nút | Nút DocumentFragment đã tạo. |
Hỗ trợ trình duyệt
document.createComment()
là tính năng DOM Cấp 1 (1998).
Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |