温馨提示×

DOM节点深度克隆函数cloneNode()用法实例

dom
小云
113
2023-08-17 13:26:40
栏目: 编程语言

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>元素,一个是原始节点,另一个是克隆节点。请注意,这两个节点虽然内容相同,但它们是彼此独立的。任何对克隆节点的改动都不会影响原始节点。

0