js中深拷贝浅拷贝，复制克隆节点，动态添加

最新推荐文章于 2023-01-05 19:31:11 发布

原创最新推荐文章于 2023-01-05 19:31:11 发布 · 370 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了JavaScript中深拷贝和浅拷贝的概念，特别是在处理DOM节点时的应用。通过`node.cloneNode()`方法，分别演示了如何实现只复制标签而不包括内容和属性的浅拷贝，以及同时复制标签、内容和属性的深拷贝。示例代码展示了如何使用这些方法动态添加和克隆DOM节点。

常用/出现的情形：

比如我们做轮播图，要根据图片数动态生成与之数量对应的小圆点。又比如有些时候我们需要在js中为Dom添加节点方便操作......

用到如下几个方法：

node.cloneNode()

node.cloneNode(true)

parent.appendChild

    <ul>
        <li>aaa</li>
    </ul>

我们先在HTML中写一个ul标签，ul标签里面有一个li标签。先在我们想再鼎泰生成一个li标签。

话不多少，看代码：

浅拷贝（只复制克隆标签，不克隆标签内部内容/属性以及内部子节点）

node.cloneNode()

    <script>
        var ul =document.querySelector('ul')
        var li = document.querySelector('ul li')
        var lis = li.cloneNode();    //复制克隆节点
        ul.appendChild(lis)          //追加到父节点
    </script>

我们来看下结果：

我们再做一些改动，试着完成深拷贝

深拷贝（复制克隆标签，同事可以克隆标签内部内容/属性以及内部子节点）

node.cloneNode(true)

        var ul =document.querySelector('ul')
        var li = document.querySelector('ul li')
        var lis = li.cloneNode(true);   //括号里面有true就是深拷贝
        ul.appendChild(lis)             //追加到父节点

我们来看下结果：