Phương thức HTML DOM createDocumentFragment()

Phương thức HTML DOM createDocumentFragment() được dùng để tạo một document fragment (mảnh tài liệu). Document fragment không ảnh hưởng đến cấu trúc DOM vì nó nằm trong bộ nhớ. Khi chúng ta nối document fragment vào DOM, nó về cơ bản được thay thế bởi các con của nó, tức là không có document fragment nào được nối vào tài liệu, chỉ các con của nó được nối thêm.

Cú pháp

Cú pháp sau đây dùng cho phương thức createDocumentFragment():

document.createDocumentFragment()

Nó trả về một đối tượng DocumentFragment, đại diện cho nút documentFragment.

Ví dụ

Hãy xem một ví dụ cho phương thức HTML DOM createDocumentFragment():

<!DOCTYPE html> <html> <body> <h1>Ví dụ createDocumentFragment()</h1> <p>Nhấn nút bên dưới để thay đổi các mục danh sách bằng phương thức createDocumentFragment.</p> <button type="button" onclick="changeList()">THAY ĐỔI</button> <ul> <li>Xoài</li> <li>Mơ</li> <li>Ổi</li> <li>Dâu tây</li> <li>Đu đủ</li> </ul> <script> function changeList() { var x = document.createDocumentFragment(); x.appendChild(document.getElementsByTagName("LI")[0]); x.childNodes[0].childNodes[0].nodeValue = "Dưa hấu"; document.getElementsByTagName("UL")[0].appendChild(x); } </script> </body> </html>

Kết quả

Điều này sẽ tạo ra kết quả sau:

Khi nhấn nút THAY ĐỔI:

Trong ví dụ trên:

Chúng ta đã tạo một danh sách không thứ tự với năm mục danh sách:

<ul> <li>Xoài</li> <li>Mơ</li> <li>Ổi</li> <li>Dâu tây</li> <li>Đu đủ</li> </ul>

Chúng ta đã tạo nút THAY ĐỔI sẽ thực thi phương thức changeList() khi được nhấp bởi người dùng:

<button type="button" onclick="changeList()">THAY ĐỔI</button>

Hàm changeList() tạo một document fragment bằng phương thức createDocumentFragment() của đối tượng document và gán nó cho biến x. Sử dụng phương thức appendChild(), chúng ta làm cho phần tử danh sách trở thành con của document fragment. Chúng ta đặt giá trị phần tử danh sách đầu tiên bên trong document fragment thành "Dưa hấu". Chúng ta sau đó nối document fragment làm con cuối cùng của <ul>:

function changeList() { var x = document.createDocumentFragment(); x.appendChild(document.getElementsByTagName("LI")[0]); x.childNodes[0].childNodes[0].nodeValue = "Dưa hấu"; document.getElementsByTagName("UL")[0].appendChild(x); }