cloneNode()是一個DOM節點的方法,用于創建該節點的一個副本。這個副本是完全獨立的,不會與原始節點有任何關聯。
下面是一個使用cloneNode()方法的示例:
<!DOCTYPE html><html>
<head>
<title>Clone Node Example</title>
</head>
<body>
<div id="original">Original Node</div>
<script>
// 獲取原始節點
const originalNode = document.getElementById('original');
// 克隆原始節點
const clonedNode = originalNode.cloneNode(true);
// 修改克隆節點的內容
clonedNode.innerHTML = 'Cloned Node';
// 將克隆節點添加到文檔中
document.body.appendChild(clonedNode);
</script>
</body>
</html>
在上述示例中,我們先通過getElementById()方法找到了一個具有id為"original"的<div>元素。然后,我們使用cloneNode(true)方法對這個節點進行深度克隆,將其包括子節點一同復制。接下來,我們修改了克隆節點的內容,并使用appendChild()方法將克隆節點添加到文檔中。
最終的結果是在頁面上顯示兩個相同內容的<div>元素,一個是原始節點,另一個是克隆節點。請注意,這兩個節點雖然內容相同,但它們是彼此獨立的。任何對克隆節點的改動都不會影響原始節點。