DOM的增删改

1、创建元素节点对象

 document.createElement()

 可以创建一个元素节点对象

 它需要一个标签名作为参数，根据该标签名创建元素节点

 并将创建好的对象作为返回值返回

2、 创建一个文本节点               

document.createTextNode()

可以用来创建一个文本节点对象

需要一个文本内容作为参数，将会根据文本内容创建文本节点，并将新的节点返回

小知识： appendChild()

               向一个父节点中添加一个子节点

               语法： 父节点.appendChild(子节点)

3、插入一个节点

 insertBefore()

 可以在指定子节点前插入新的子节点

 语法

         父节点.insertBefore(新节点,旧节点);

4、替换一个节点

replaceChild()

可以使用指定子节点替换已有子节点

语法

         父节点.replaceChild(新节点,旧节点);

5、删除一个节点

removeChild()

删除一个子节点

语法  父节点. removeChild(子节点);

不知道父节点是什么的情况下： 

子节点.parentNode.removeChild(子节点);

案例应用：

<script>
        
        window.onload=function(){
            // 创建一个清莱节点添加到city
            myClick("btn01",function(){
                // 创建清莱节点
                // 创建li
                /*
                * document.createElement()
                * 可以创建一个元素节点对象
                * 它需要一个标签名作为参数，根据该标签名创建元素节点
                * 并将创建好的对象作为返回值返回
                */
                var li=document.createElement("li");
                // 创建清莱的文本节点
                /*
                * document.createTextNode()
                * 可以用来创建一个文本节点对象
                * 需要一个文本内容作为参数，将会根据文本内容创建文本节点，并将新的节点返回
                */
                var gzText=document.createTextNode("清莱");
                // 将清莱的text设置为li的子节点
                /*
                * appendChild()
                * 向一个父节点中添加一个子节点
                * 语法： 父节点.appendChild(子节点)
                */
                li.appendChild(gzText);

                // 获取id为city的节点
                var city=document.getElementById("city");    
                // 将清莱节点添加到city
                city.appendChild(li);
        
            });

            // 将清莱节点插到bj前
            myClick("btn02",function(){
                // 创建一个清莱
                var li=document.createElement("li");
                var gzText=document.createTextNode("清莱");
                li.appendChild(gzText);
                // 获取id为bj的节点
                var bj=document.getElementById("bj");
                /*
                * insertBefore()
                * 可以在指定子节点前插入新的子节点
                * 语法
                *     父节点.insertBefore(新节点,旧节点);
                */

                // 获取city
                var city=document.getElementById("city");
                city.insertBefore(li,bj);

            });

            // 使用清莱节点替换bj节点
            myClick("btn03",function(){
                // 创建一个清莱
                var li=document.createElement("li");
                var gzText=document.createTextNode("清莱");
                li.appendChild(gzText);
                // 获取id为bj的节点
                var bj=document.getElementById("bj");
                // 获取city
                var city=document.getElementById("city");
                /*
                * replaceChild()
                * 可以使用指定子节点替换已有子节点
                * 语法
                *     父节点.replaceChild(新节点,旧节点);
                */
                city.replaceChild(li,bj);
            });

            // 删除bj节点
            myClick("btn04",function(){
                // 获取id为bj的节点
                var bj=document.getElementById("bj");
                // 获取city
                // var city=document.getElementById("city");
                /*
                * removeChild()
                * 删除一个子节点
                * 语法  父节点. removeChild(子节点);
                *
                * 
                * 子节点.parentNode.removeChild(子节点);
                */
                // city.removeChild(bj);

                // 不知道bj的父元素情况(常用)

                bj.parentNode.removeChild(bj);
            });

            // 读取city内html代码
            myClick("btn05",function(){
                // 获取city
                var city=document.getElementById("city");
                alert(city.innerHTML);
            });

            // 设置bj内的html代码
            myClick("btn06",function(){
                // 获取id为bj的节点
                var bj=document.getElementById("bj");
                bj.innerHTML="清莱";
            });


            /*
            * 使用innerHTML也可以进行增删改的部分
            * 一般两种方式结合使用
            */
            // 创建一个清莱节点添加到city
            myClick("btn07",function(){
                var city=document.getElementById("city");
                // city.innerHTML+="<li>清莱</li>";
                // 创建一个li
                var li=document.createElement("li");
                // 向li中设置文本
                li.innerHTML="清莱";
                // 将li添加至city
                city.appendChild(li);
            });

        };
        function myClick(idStr,fun){
            var btn=document.getElementById(idStr);
            btn.onclick=fun;
        }
       
    </script>