DOM操作-01-对节点进行增删复制

最新推荐文章于 2023-04-26 17:23:53 发布

金子塔上的大熊猫

最新推荐文章于 2023-04-26 17:23:53 发布

阅读量122

点赞数

本文链接：https://blog.csdn.net/qq_41874591/article/details/116017996

版权

文章目录

节点的添加
删除节点removeChild（）
- 删除子节点removeChild（）
- 如果想删除自身
复制节点cloneNode()

节点的添加

添加一个子结点

<body>
<div class="content" id="content">
    <div class="first"></div>
</div>
<script type="text/javascript">
    let div1=document.createElement("div");
    let divContent=document.getElementById("content");
    
    divContent.appendChild(div1);
</script>
</body>

如下图所示，一个新的div标签产生了
在这里插入图片描述
以上好像是在最后一个字节点后边添加的，如果你想添加子节点并且确定位置，这个方法好像不可以

添加一个子节点，并且指定位置insertBefore（param1，param2）

<body>
<div class="content" id="content">
    <div class="first" id="first"></div>
</div>
<script type="text/javascript">
    let div1=document.createElement("div");
    let divContent=document.getElementById("content");
    let divSon1=document.getElementById("first");
    //在divSon1结点前面插入div1
    divContent.insertBefore(div1,divSon1);
</script>
</body>

在这里插入图片描述
注意：如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。也就是说，参考节点为null，等价于appendChild（）方法

若添加的节点是已经存在的，会发生什么？

上面的我们添加的节点都是通过 let div1=document.createElement(“div”); 创建的。现在试试添加已经存在的：

<body>
<div id="content">
    <div  id="first"></div>
</div>
<div id="content1">
    <div id="one"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");

    let one=document.getElementById("one");

    content.appendChild(one);
</script>
</body>

在这里插入图片描述
神奇的发现：原本属于content1的one被移到了content里面

删除节点removeChild（）

删除子节点removeChild（）

<div id="content">
    <div  id="first"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    let first=document.getElementById("first");
    content.removeChild(first);
</script>
</body>

在这里插入图片描述

如果想删除自身

<div id="content">
    <div  id="first"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    //删除自身，级联删除
    content.parentNode.removeChild(content);
</script>

复制节点cloneNode()

不带参数/带参数false：只复制节点本身，不复制子节点。
带参数true：既复制节点本身，也复制其所有的子节点。

<body>
<div id="content">
    <div  id="first"></div>
</div>
<div id="content1">
    <div id="one"></div>
</div>
<script type="text/javascript">
    let content=document.getElementById("content");
    let node = content.cloneNode(true);
    content.parentNode.appendChild(node);

</script>
</body>

在这里插入图片描述