Document: phương thức createDocumentFragment()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Tạo một DocumentFragment mới trống để có thể thêm các nút DOM vào nhằm xây dựng một cây DOM offscreen.

Cú pháp

createDocumentFragment()

Giá trị trả về

Một đối tượng DocumentFragment mới được tạo, trống, sẵn sàng để chèn các nút vào.

DocumentFragment là các đối tượng Node DOM không bao giờ là một phần của cây DOM chính. Trường hợp sử dụng thông thường là tạo document fragment, thêm các phần tử vào document fragment và sau đó thêm document fragment vào cây DOM. Trong cây DOM, document fragment được thay thế bằng tất cả các phần tử con của nó.

Vì document fragment nằm trong bộ nhớ và không phải là một phần của cây DOM chính, nên việc sử dụng document fragment có thể mang lại hiệu suất tốt hơn trong một số engine cũ hơn.

Bạn cũng có thể sử dụng phương thức khởi tạo DocumentFragment để tạo một fragment mới:

const fragment = new DocumentFragment();

Ví dụ

Ví dụ này tạo một danh sách các trình duyệt web chính trong một DocumentFragment, sau đó thêm cây DOM con mới vào tài liệu để hiển thị.

HTML

html

<ul id="ul"></ul>

JavaScript

const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];

browsers.forEach((browser) => {
  const li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);