Phương thức HTML DOM cloneNode () được sử dụng để tạo bản sao của một nút nhất định mà trên đó phương thức cloneNode () được gọi 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 nhất định.
Cú pháp
Sau đây là cú pháp cho phương thức cloneNode () -
yourNode.cloneNode([deep])
Ở đây, deep là một tham số tùy chọn. Bằng cách đặt giá trị của nó là true, chúng tôi chỉ định rằng nút đã cho và các nút con của nó cùng với các thuộc tính và giá trị của chúng phải được sao chép và bằng cách đặt giá trị của nó là false, chúng tôi chỉ định rằng chúng tôi chỉ muốn sao chép nút đã cho 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 để chúng tôi 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> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
<button onclick="CloneEle()"> CLONE </button>
<script>
function CloneEle() {
var x= document.getElementById("DIV1");
var clone = x.cloneNode(true);
document.body.appendChild(clone);
}
</script>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút CLONE -
Trong ví dụ trên -
Chúng ta đã tạo một div và có các phần tử
h1{color:green;}
h2{ color:blue; }
<div id="DIV1">
<h1> HEADING 1</h1>
<h2> HEADING 2</h2>
</div>
Sau đó, chúng tôi đã tạo một nút CLONE sẽ thực thi hàm CloneEle () khi người dùng nhấp vào -
<button onclick="CloneEle()"> CLONE </button>
Phương thức CloneEle () sẽ lấy phần tử div bằng cách sử dụng phương thức getElementById () và gán nó cho biến x. Sau đó, chúng tôi sử dụng phương thức cloneNode (ture) trên
function CloneEle() {
var x= document.getElementById("DIV1");
var clone = x.cloneNode(true);
document.body.appendChild(clone);
}