JavaScript---DOM模型之DOM树节点的增、删、改、查（二）

本文链接：https://blog.youkuaiyun.com/weixin_37720904/article/details/71516279

本文详细介绍了DOM操作中的增、删、改方法，包括如何添加文本节点和元素节点，使用removeNode和removeChild进行删除操作，以及如何实现节点的替换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇主要学习了DOM树节点的查，这一篇就要来学习，增，删，改。

DOM树节点的增

第一种情况：增加一个文本节点
三个步骤：

创建一个文本节点：document.createTextNode(“文本内容”)

var oTextNode = document.createTextNode("湖南城院");

找到要加在的位置（找到父节点）：主要是前面查的方法

var oDivNode = document.getElementById("div1")

.父节点把文本节点加进去：appendChild方法

oDiv.appendChild(oTextNode);

代码演示

 <body>
        <div id="div1">div区域</div>
        <hr/>
        <input type="button" value="间接查询childNodes" onclick="demo1()">
        <input type="button" value="间接查询children" onclick="demo2()">
      <script type="text/javascript">
            function demo1(){
                // 创建一个文本节点     createTextNode
                var oTextNode = document.createTextNode(",增加的文本节点");
                // 找到要添加的位子（父节点）
                var oDivNode = document.getElementById("div1");
                // 把文本节点添加进去
                oDivNode.appendChild(oTextNode);
            }
      </script>

  </body>

添加前
这里写图片描述
添加后

第二种情况：增加一个普通元素节点
三个步骤（与前面类似）

创建一个普通元素 createElement(元素名)

var oNode = document.createElement("input");

找到要加在的位置（找到父节点）：主要是前面查的方法

var oDivNode = document.getElementById("div1")

.父节点把文本节点加进去：appendChild方法

oDiv.appendChild(oNode);

添加前
这里写图片描述
添加后

第二种添加元素节点方法： innerHTML 方法和 innerText方法

第一步找到添加位置（父节点）

var oDiv = document.getElementById("div1");

第二步直接调用方法添加

oDiv.innerText = "abc123"
oDiv.innerHTML = '<input type="button" value="一个新按钮" onclick="add2()">';

演示
这里写图片描述

整片学习代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM模型演示---增删改查中的增</title>
    </head>

    <body>
       <div id="div1">   </div>

       <hr/>
       <input type="button" value="添加1" onclick="add1()"><br/>
       <input type="button" value="添加2" onclick="add2()"><br/>
       <input type="button" value="添加3" onclick="add3()"><br/>

        <script type="text/javascript">
            //1添加一个文本节点
            function add1(){
                //1创建一个文件节点
                var oTextNode = document.createTextNode("湖南城院");
                //2获取div节点
                var oDiv = document.getElementById("div1");
                //3把文本节点加成div节点的孩子
                oDiv.appendChild(oTextNode);
            }

            //2添加一个按钮节点
            function add2(){
                //1创建一个文件节点
                var oInputNode = document.createElement("input");
                oInputNode.type="button";
                oInputNode.value="一个新按钮";

                //2获取div节点
                var oDiv = document.getElementById("div1");
                //3把文本节点加成div节点的孩子
                oDiv.appendChild(oInputNode);
            }

            //3通过每个标签的innerHTML属性也可以添加节点
            function add3(){
                //1获取div节点
                var oDiv = document.getElementById("div1");
                //2设置div节点的innerHTML属性 (innerText属性也可以，但只是文本内容)
                //oDiv.innerText="abc132";
                //oDiv.innerText=oDiv.innerText+"abc132";
                oDiv.innerHTML='<input type="button" value="一个新按钮" onclick="add2()">';
            }
        </script>


    </body>
</html>

接下来就是删除节点

删除节点方法两种：
第一种： 自己调用removeNode(true/false) true,false是否删除子节点返回值为被删除的节点（不知道为什么敲代码这个浏览器没用，360也不行，换了老的IE）

var oDivNode = document.getElementById("div2");

//true 表示删除子节点  false 表示不删除子节点

var boo= oDivNode.removeNode(false);

删除节前
这里写图片描述
删除节点后（不删除子节点
删除子节点

还有一种删除的方式，通过父节点来删除自己。与上一种类似，仅仅是调用了.parentNode.removeChild(oldNode)方法

function delNode(){
    var oDivNode = document.getElementById("div2");
    //true 表示删除子节点  false 表示不删除子节点
    var boo= oDivNode.removeNode(true);
    通过父节点来删除自己 removeChild()会整个子树一起删除
    oDivNode.parentNode.removeChild(oDivNode);
}

接下来就是—改（替换）

替换有两种情况，移动替换（交换）和克隆替换

移动替换如下
这里写图片描述

克隆替换如下
这里写图片描述

两者代码演示

<body>
       <div id="div1"> 第一个div  </div>
       <div id="div2">
                        第二个div 
           <a href="#a">aaaa</a>
           <span>eeee</span>
       </div>
       <div id="div3"> 第三个div  </div>
       <hr/>
        <input type="button" value="移动替换" onclick="updateNode1()">
        <input type="button" value="克隆替换" onclick="updateNode2()">
      <script type="text/javascript">
            function updateNode1(){
                //先拿到两个要移动替换的节点 oDiv1 oDiv3
                var oDiv1 = document.getElementById("div1");
                var oDiv3 = document.getElementById("div3");
                // 利用父节点调用 replaceChild （oDiv1,oDiv3）
                oDiv1.parentNode.replaceChild(oDiv1, oDiv3);
            }
            function updateNode2(){
                //先拿到两个要移动替换的节点 oDiv1 oDiv3
                var oDiv1 = document.getElementById("div1");
                var oDiv3 = document.getElementById("div3");
                // 克隆衣服oDiv3.cloneNode(true/false) 是否克隆子节点 默认false;
                var  copyoDiv3 = oDiv3.cloneNode();
                oDiv3.parentNode.replaceChild(copyoDiv3, oDiv1)
            }

      </script>

  </body>

替换前
这里写图片描述
移动替换

克隆替换（不带子树）

克隆替换带子树

上课时学习代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM模型演示---增删改查中的删</title>
        <style type="text/css">
            div{
                border: #00ff00 solid 1px;
                width: 200px;
                height:50px;
                margin:10px;
            }
            #div1{
                background-color: #770077
            }
            #div2{
                background-color: #00DD00
            }
            #div3{
                background-color: #FFFF00
            }
        </style>
    </head>

    <body>
       <div id="div1"> 第一个div  </div>
       <div id="div2">
                        第二个div 
           <a href="#a">aaaa</a>
           <span>eeee</span>
       </div>
       <div id="div3"> 第三个div  </div>

       <hr/>
       <input type="button" value="删除" onclick="delNode()"><br/>
        <script type="text/javascript">
            function delNode(){
                var oDivNode = document.getElementById("div2");

                //var boo = oDivNode.removeNode(false); //删除后，所有子节点上升一层
                //var boo = oDivNode.removeNode(true); //连子节点一起删除
                alert(boo);


                //建议比较干净删除方式,让父节点删除子节点
            //  oDivNode.parentNode.removeChild(oDivNode); //removeChild()会整个子树一起删除

            }

        </script>

        <br/>
        <input type="button" value="移动替换" onclick="updateNode()"><br/>
        <input type="button" value="克隆替换" onclick="updateNode2()"><br/>
        <script type="text/javascript">
            //用div3 替换 div1
            //1移动替换
            function updateNode(){
                var oDivNode1 = document.getElementById("div1");
                var oDivNode3 = document.getElementById("div3");
                //oDivNode1.replaceNode(oDivNode3);
                oDivNode1.parentNode.replaceChild(oDivNode3,oDivNode1);
            }

            //2克隆替换
            function updateNode2(){
                var oDivNode1 = document.getElementById("div1");
                var oDivNode3 = document.getElementById("div3");
                var oCopyDiv3 = oDivNode3.cloneNode(true);//空参默认为cloneNode(false),代表子树不克隆。相反，cloneNode(true)会连子树一起克隆
                oDivNode1.parentNode.replaceChild(oCopyDiv3,oDivNode1);
            }
        </script>   
    </body>
</html>