操作dom实现增删改

HTML代码：
<h1>操作dom实现增删改</h1>
    <div class="content">
        <div>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
        </div>
        <div id="btnList">
            <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
            <div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
            <div><button id="btn03">使用"广州"节点替换#bj解点</button></div>
            <div><button id="btn04">删除#bj节点</button></div>
            <div><button id="btn05">读取#city内的HTML代码</button></div>
            <div><button id="btn06">设置#bj内的HTML代码</button></div>
            <div><button id="btn07">通过innerHtml添加广州节点</button></div>
        </div>
    </div>

JavaScript代码：
window.onload = function () {
            //1.创建一个"广州"节点,添加到#city下
            myClick("btn01",function () {
                //1.创建新元素
                var li = document.createElement("li");
                //2.创建文本节点
                var gzText = document.createTextNode("广州");
                //向 <li> 元素追加文本节点
                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> 元素追加文本节点
                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> 元素追加文本节点
                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 +="<li>广州</li>"  不建议使用
                //1.创建新元素
                 var li = document.createElement("li");
                //2.向li中设置文本 替换var gzText = document.createTextNode("广州") 写法
                 li.innerHTML="广州";
                //向 <li> 添加到city中
                city.appendChild(li);
            })
        };
        function myClick(idStr,fun) {
            var btn = document.getElementById(idStr);
            btn.onclick = fun;
        }