DOM中的克隆节点

最新推荐文章于 2023-07-17 09:31:19 发布

安静的对折

最新推荐文章于 2023-07-17 09:31:19 发布

阅读量1.9k

点赞数 1

分类专栏： JS 文章标签： cloneNode appendChild insertBefor removeChild

本文链接：https://blog.csdn.net/k491022087/article/details/52579141

版权

JS 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

克隆节点

cloneNode()克隆节点

cloneNode(false)浅拷贝，只拷贝当前标签节点，而不拷贝标签节点中的内容以及子节点，

cloneNode(true)深拷贝，标签中的所有内容全部都拷贝

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul id="list">
    <li>1111</li>
    <li>2222</li>
    <li id="li3">3333</li>
    <li>4444</li>
</ul>
<script>
    var ul = document.getElementById("list");
    console.log(ul.cloneNode(false));
    console.log(ul.cloneNode(true));
</script>
</body>
</html>

克隆节点后可以进行插入节点和移出节点

appendChild(节点元素)

insertBefore(节点元素，位置)

removeChild(节点元素)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<ul id="list">
    <li>1111</li>
    <li>2222</li>
    <li id="li3">3333</li>
    <li>4444</li>
</ul>
<script>
    //获取对象
    var ul = document.getElementById("list");
    var lis = ul.children;   //获取ul标签下面的第一子节点
    var li1 = lis[0].cloneNode(true);   //将第一个子节点进行深拷贝，也就是说先克隆在内存中，然后从内存中剪切下来
    ul.appendChild(li1); //将拷贝的节点追加到ul标签下的最后面

    li1 = lis[0].cloneNode(true);
    ul.insertBefore( li1, lis[2]);  //在第三个li标签前面插入克隆的第一个li标签
    
</script>
</body>
</html>

在script标签内最后面添加下面一句代码，将li1标签移除掉

ul.removeChild(li1);   //将li1标签移除掉

安静的对折

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM中的克隆节点

克隆节点cloneNode()克隆节点cloneNode(false)浅拷贝，只拷贝当前标签节点，而不拷贝标签节点中的内容以及子节点，cloneNode(true)深拷贝，标签中的所有内容全部都拷贝 Document 1111 2222 3333 4444 var ul = document.get
复制链接

扫一扫