DOM操作指南-优快云博客

DOM中节点的添加和删除

1，节点的添加

方法：两个例子的代码利用两种方式呈现

（1）appendChild（）：追加节点为层的最后一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加网页元素</title>
    <script>
        function addTxt() {
            //创建一个input元素
            var txt = document.createElement("input");
            //设置元素为文本框
            txt.value="新添加的文本框";
            // 将文本框添加到层中
            var div = document.getElementById("disDiv");
            div.appendChild(txt);
        }
    </script>
</head>
<body>
<center>
    <div id="disDiv" style="text-align: center;border: 1px solid red;width: 450px;height: 100px">
    </div>
    //创建一个按钮并添加点击事件
    <input type="button" value="添加文本框" onclick="addTxt()">
</center>
</body>
</html>
复制代码

（2）insertBefore（new，old）：把new节点插入到old节点之前

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加网页元素</title>
    <script>
        window.onload = function () {
            //得到btn按钮
            var btn = document.getElementById('btn');
            //给btn注册一个点击事件
            btn.onclick = function () {
                //创建一个h1元素
                var h1 = document.createElement('h1');
                //向h1标签中写入内容
                h1.innerHTML = "DOM中添加元素"
                document.body.insertBefore(h1,btn);
            }
        }
    </script>
</head>
<body>
<button id="btn">创建h1元素</button>
</body>
</html>
复制代码

2，节点的删除

removeChild()

方法说明：

当执行删除节点的方法时，只有父元素才有权力删除具体用法如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除网页元素</title>
    <script>
        function delEle(){
            //得到层，删除元素时只有父元素才有权利删除子元素
            var div = document.getElementById("box");
            //得到层的子元素
            var listChild = div.childNodes;
            //如果层有子元素，就删除第一个子元素
            if(listChild != null && listChild.length>0){
                div.removeChild(listChild[0]);
            }
            else
            {
                alert("已经没有可删除的子元素了！")
            }
        }
    </script>
</head>
<body>
<input type="button" value="删除节点" onclick="delEle()">
<div id="box">
    <p>点击删除节点按钮，下面这个元素会被删除</p>
    <h2>将被删除的元素</h2>
</div>
</body>
</html>
复制代码

本文是个人学习中的总结，希望对大家能有帮助，欢迎大家评论，我们共同进步