JavaScript DOM方法、innerHTML实现增删改

时间:2021-02-15 14:45:51
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                list-style: none;
                
            }
            #main{
                border: 1px solid black;
                width: 270px;
                height: 300px;
                float: left;
                text-align: center;
            }
            button{
                display: block;
                text-align: center;
                margin-left:20px ;
                margin-top: 10px;
            }
            li{
                display: block;
                background-color: lawngreen;
                width: 80px;
                margin: 5px ;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <p>你想去哪个城市?</p>
            <div id="city">
                <li id="bj">北京</li>
                <li>武汉</li>
                <li>杭州</li>
            </div>
        </div>
        <div id="main">
            <button id="btn1">创建一个"广州"节点,添加到#city下</button>
            <button id="btn2">将"广州"节点插入到#bj前面</button>
            <button id="btn3">使用"广州"节点替换#bj节点</button>
            <button id="btn4">删除#bj节点</button>
            <button id="btn5">读取#city内的html代码</button>
            <button id="btn6">设置#bj内的html代码</button>
            <button id="btn7">用innerHTML实现btn1的效果</button>
        </div>
    </body>
    <script type="text/javascript">
        function myClick(idStr,fun){ 
            var btn=document.getElementById(idStr);
            btn.onclick=fun;
        }
        
        //1.创建一个"广州"节点,添加到#city下  
//        appendChild()添加子节点。  语法:父节点.appendChild(子节点);添加子节点
        myClick("btn1",function(){
            //alert("hello");
            //1.创建广州节点 <li>广州</li>
             //先创建li元素节点
            var li=document.createElement("li"); //以标签名作为元素,创建元素节点,返回值返回
             //再创建广州文本节点
            var gzText=document.createTextNode("广州");
            //2.子节点gzText添加到li下
            li.appendChild(gzText); //    父节点.appendChild(子节点);
            //3.子节点li添加到#city下
             //先获取#city节点
            var city=document.getElementById("city");
             //再添加
            city.appendChild(li);
        });
        //2.将"广州"节点插入到#bj前面   
//        insertBefore() 在指定的子节点前面插入新的子节点。 语法:父节点.insertBefore(新子节点,旧子节点)
        myClick("btn2",function(){
            //创建<li>广州</li>
            var li=document.createElement("li"); 
            var gzText=document.createTextNode("广州");
            li.appendChild(gzText);
            //在指定的子节点前面插入新的子节点
            var bj=document.getElementById("bj");
            var city=document.getElementById("city");
            city.insertBefore(li,bj); //  父节点.insertBefore(新子节点,旧子节点)
            
        });
        //3.使用"广州"节点替换#bj节点  
//        replaceChild(li,bj) 替换子节点。语法:父节点.replaceChild(新子节点,旧子节点)
        myClick("btn3",function(){
            //创建<li>广州</li>
            var li=document.createElement("li"); 
            var gzText=document.createTextNode("广州");
            li.appendChild(gzText);
            //替换子节点
            var bj=document.getElementById("bj");
            var city=document.getElementById("city");
            city.replaceChild(li,bj);
        });
        //4.删除#bj节点
//        removeChild(bj) 删除子节点。语法:父节点.removeChild(子节点)
        myClick("btn4",function(){
            var bj=document.getElementById("bj");
            //var city=document.getElementById("city");
            //city.removeChild(bj);
            bj.parentNode.removeChild(bj);//bj.parentNode就是获取父元素,不用获取知不知道父元素了
            //bj.remove();//直接删除北京节点,
        });
        //5.读取#city内的html代码
        myClick("btn5",function(){
            var city=document.getElementById("city");
            alert(city.innerHTML);
        });
        //6.修改#bj内的html代码
        myClick("btn6",function(){
            var bj=document.getElementById("bj");
            bj.innerHTML="上海";
        });
        //7.用innerHTML实现btn1的效果
        myClick("btn7",function(){
            var city=document.getElementById("city");
            //innerHTML也可以实现DON增删改操作,但一般结合使用
            //city.innerHTML += "<li>广州</li>"; //这样直接使用对原内容有影响,不合理
            var li=document.createElement("li"); 
            li.innerHTML="广州";
            city.appendChild(li);  
        });
    </script>
</html>