DOM 节点的克隆和导入

最新推荐文章于 2024-06-01 18:37:55 发布

编程三昧

最新推荐文章于 2024-06-01 18:37:55 发布

阅读量1.6k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言 dom操作

本文链接：https://blog.csdn.net/qq_37718797/article/details/123024401

版权

前言

在使用 JS 操作 DOM 节点的时候，我们常常会用到克隆（或导入）节点的操作，那到底有哪些方法可以实现节点克隆（或导入）的效果呢？

今天，我们就来总结一下能实现节点克隆（或导入）效果的方法。

`node.cloneNode()`

提到克隆节点，我们最先能想到的肯定是 node.cloneNode() 方法。

语法

其语法如下：

let cloneNode = targetNode.cloneNode(deep);

cloneNode 最终克隆生成的节点副本。
targetNode 将要被克隆的目标节点。
deep 可选参数，表示是否需要进行深度克隆，即是否需要克隆 targetNode 下的子节点，默认为 false。

举例：

<body>
    <div id="container">
        <div class="header">这是头部</div>
        <div class="body">
            <div class="content">内容一</div>
            <div class="content">内容二</div>
        </div>
    </div>

    <script>
        const target = document.querySelector(".body");
        const cloneNode1 = target