操作dom实现增删改

HTML代码：
操作dom实现增删改
    

        

            

                
北京
                
上海
                
东京
                
首尔
            
        
        

            
创建一个"广州"节点,添加到#city下
            
将"广州"节点插入到#bj前面
            
使用"广州"节点替换#bj解点
            
删除#bj节点
            
读取#city内的HTML代码
            
设置#bj内的HTML代码
            
通过innerHtml添加广州节点
        
    

JavaScript代码：
window.onload = function () {
            //1.创建一个"广州"节点,添加到#city下
            myClick("btn01",function () {
                //1.创建新元素
                var li = document.createElement("li");
                //2.创建文本节点
                var gzText = document.createTextNode("广州");
                //向 
 元素追加文本节点
                li.appendChild(gzText);
                //将创建的标签添加到city下
                var city = document.getElementById("city");
                city.appendChild(li);
            })


            //2.将"广州"节点插入到#bj前面
            myClick("btn02",function () {
                 //1.创建新元素
                var li = document.createElement("li");
                //2.创建文本节点
                var gzText = document.createTextNode("广州");
                //向 
 元素追加文本节点
                li.appendChild(gzText);
                //将创建的标签添加到city #bj前面
                var city = document.getElementById("city");
                var bj = document.getElementById("bj");
                city.insertBefore(li,bj);
            })

            //3.使用"广州"节点替换#bj节点
            myClick("btn03",function () {
               //1.创建新元素
                var li = document.createElement("li");
                //2.创建文本节点
                var gzText = document.createTextNode("广州");
                //向 
 元素追加文本节点
                li.appendChild(gzText);
                //使用"广州"节点替换#bj节点
                var city = document.getElementById("city");
                var bj = document.getElementById("bj");
                //replaceChild（新节点，被替换的节点）
                city.replaceChild(li,bj);
            })

            //4.删除#bj节点
            myClick("btn04",function () {
                var city = document.getElementById("city");
                var bj = document.getElementById("bj");
                //replaceChild（新节点，被删除的节点）
                city.removeChild(bj);
                //子节点.partentNode.removeChild(子节点)  常用
                //bj.partentNode.removeChild(bj)
            })


            //5.读取#city内的HTML代码
            myClick("btn05",function () {
                var city = document.getElementById("city");
                console.log(city.innerHTML)      
            })

            //6.设置#bj内的HTML代码
            myClick("btn06",function () {
                var bj = document.getElementById("bj");
                bj.innerHTML="北京变北平"
            })

            //7.通过innerHtml添加广州节点
            myClick("btn07",function () {
                var city = document.getElementById("city");
                //city.innerHTML +="
广州
"  不建议使用
                //1.创建新元素
                 var li = document.createElement("li");
                //2.向li中设置文本 替换var gzText = document.createTextNode("广州") 写法
                 li.innerHTML="广州";
                //向 
 添加到city中
                city.appendChild(li);
            })
        };
        function myClick(idStr,fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }