Hàm document.createDocumentFragment() trong Javascript - Javascript Function
Code RUN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #test { color: red; } </style> <body> <h1>Học lập ...
Phương thức createDocumentFragment() sẽ tạo ra một đối tượng Node Object ảo với tất cả các thuộc tính và phương thức của một đối tượng Node Object.
Phương thức createDocumentFragment() rất hữu ích khi bạn muốn sửa đổi nội dung một node nào đó trong trang. trước tiên ta sẽ trích xuất node cần sửa, sau đó thay đổi, thêm mới hoặc xóa bớt một phần nội dung của node, cuối cùng là gắn lại vào trang.
Bạn cũng có thể sử dụng đối tượng Document Object của trang để thực hiện chỉnh sửa, tuy nhiên để tránh những sai sót và không làm hỏng cấu trúc vốn có của tài liệu bạn nên trích xuất nội dung cần thay đổi, sau đó chỉnh sửa chúng rồi gắn lại vào trang.
Lưu ý rằng node được trích xuất vào Node Object ảo sẽ bị xóa khỏi trang.
Cú pháp
Cú pháp: document.createDocumentFragment()
Cách sử dụng
Thay đổi nội dung thẻ li có id="js" thành JQUERY sau đó gắn nó vào trong thẻ ul:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#test {
color: red;
}
</style>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.net</h1>
<ul>
<li>PHP</li>
<li>HTMl</li>
<li>CSS</li>
<li id="js">JAVASCRIPT</li>
</ul>
<button onclick="myFunction()">Xem kết quả</button>
<script>
function myFunction(){
var node = document.createDocumentFragment();
node.appendChild(document.getElementById("js"));
node.childNodes[0].childNodes[0].nodeValue = "JQUERY";
document.getElementsByTagName("UL")[0].appendChild(node);
}
</script>
</body>
</html>Ở đây, sẽ có nhiều bạn thắc mắc về đoạn code node.childNodes[0].childNodes[0].nodeValue = "JQUERY"; tại sao phải là 2 lần childNodes[0]. Các bạn nhớ rằng tất cả các đoạn text đều được xem như là một node con của node chứa nó, vậy nên nếu chỉ sử dụng một lần childNodes[0] ta mới chỉ truy cập đến thẻ li mà thôi.
Tham khảo: w3schools.com
Nguồn: Zaidap.com.net
