带你彻底学会JS DOM技术之删除，复制，替换元素_在父元素内部删除

作者：花生_TL007 | 2024-03-05 11:46:04

踩

在父元素内部删除

带你彻底学会JS DOM技术之删除，复制，替换元素

1.删除元素
2.复制元素
3.替换元素

1.删除元素

在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素

语法：

A.removeChild(B);
1

A表示父元素，B表示父元素内部的某个子元素

案例：删除最后一个子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                const oUl = document.getElementById("list");
                //删除最后一个子元素
                oUl.removeChild(oUl.lastElementChild);
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除"/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在这里插入图片描述

页面点击删除后，会删除页面列表的最后一项：

在这里插入图片描述

举例：删除整个列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                const oUl = document.getElementById("list");
                document.body.removeChild(oUl);
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
    <li>Vue.js</li>
</ul>
<input id="btn" type="button" value="删除"/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2.复制元素

在JavaScript中，我们可以使用cloneNode()方法来实现复制元素

语法：

obj.cloneNode(bool)
1

参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。

1或true：表示复制元素本身以及复制该元素下的所有子元素。
0或false：表示仅仅复制元素本身，不复制该元素下的子元素。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                const oUl = document.getElementById("list");
                document.body.appendChild(oUl.cloneNode(1));
            }
        }
    </script>
</head>
<body>
<ul id="list">
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
<input id="btn" type="button" value="复制"/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在这里插入图片描述

点击复制后，会对整个列表进行复制：

在这里插入图片描述

3.替换元素

在JavaScript中，我们可以使用replaceChild()方法来实现替换元素

语法：

A.replaceChild(new,old);
1

A表示父元素，new表示新子元素，old表示旧子元素

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script>
        window.onload = function () {
            const oBtn = document.getElementById("btn");
            oBtn.onclick = function () {
                //获取body中的第1个元素
                const oFirst = document.querySelector("body *:first-child");
                //获取2个文本框
                const oTag = document.getElementById("tag");
                const oTxt = document.getElementById("txt");
                //根据2个文本框的值来创建一个新节点
                const oNewTag = document.createElement(oTag.value);
                const oNewTxt = document.createTextNode(oTxt.value);
                oNewTag.appendChild(oNewTxt);
                document.body.replaceChild(oNewTag, oFirst);
            }
        }
    </script>
</head>
<body>
<p>JavaScript</p>
<hr/>
输入标签：<label for="tag"></label><input id="tag" type="text"/><br/>
输入内容：<label for="txt"></label><input id="txt" type="text"/><br/>
<input id="btn" type="button" value="替换"/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在这里插入图片描述

键入文本框中信息，点击替换，结果如下：

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/190793