Phương thức HTML DOM cloneNode() được dùng để tạo một bản sao của một nút cho trước mà phương thức cloneNode() được gọi trên và nó trả về bản sao. Phương thức cloneNode() sao chép tất cả các thuộc tính và giá trị của một nút cho trước.
Cú pháp
Cú pháp sau đây dùng cho phương thức cloneNode():
yourNode.cloneNode([deep])
Ở đây, deep là tham số tùy chọn. Bằng cách đặt giá trị true, chúng ta chỉ định rằng nút cho trước và các con của nó cùng với các thuộc tính và giá trị của chúng nên được sao chép. Bằng cách đặt giá trị false, chúng ta chỉ định rằng chúng ta chỉ muốn sao chép nút cho trước và các thuộc tính và giá trị của nó chứ không phải các nút con của nó.
Ví dụ
Hãy xem một ví dụ cho phương thức HTML DOM cloneNode():
<!DOCTYPE html> <html> <head> <title>CLONE NODE</title> <style> h1{color:green;} h2{ color:blue; } </style> </head> <body> <div id="DIV1"> <h1> TIÊU ĐỀ 1</h1> <h2> TIÊU ĐỀ 2</h2> </div> <button onclick="CloneEle()"> SAO CHÉP </button> <script> function CloneEle() { var x = document.getElementById("DIV1"); var clone = x.cloneNode(true); document.body.appendChild(clone); } </script> </body> </html>Kết quả
Điều này sẽ tạo ra kết quả sau:
Khi nhấn nút SAO CHÉP:
Trong ví dụ trên:
Chúng ta đã tạo một div và có phần tử <h1> và <h2> bên trong nó. Phần tử <h1> và <h2> có kiểu dáng riêng.
h1{color:green;} h2{ color:blue; } <div id="DIV1"> <h1> TIÊU ĐỀ 1</h1> <h2> TIÊU ĐỀ 2</h2> </div>Chúng ta đã tạo nút SAO CHÉP sẽ thực thi hàm CloneEle() khi được nhấp bởi người dùng:
<button onclick="CloneEle()"> SAO CHÉP </button>
Phương thức CloneEle() sẽ lấy phần tử div bằng phương thức getElementById() và gán nó cho biến x. Chúng ta sau đó sử dụng phương thức cloneNode(true) trên <div> với tham số true để sao chép nó và các phần tử con của nó và gán chúng cho biến clone. Biến clone sau đó được nối thêm vào thân tài liệu bằng phương thức appendChild():
function CloneEle() { var x = document.getElementById("DIV1"); var clone = x.cloneNode(true); document.body.appendChild(clone); }