DOM节点深度克隆函数cloneNode()用法实例
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>元素，一个是原始节点，另一个是克隆节点。请注意，这两个节点虽然内容相同，但它们是彼此独立的。任何对克隆节点的改动都不会影响原始节点。
阅读剩余
THE END
