dom的增删改

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <ul id="city">
            <li id="sz">深圳</li>
            <li>广州</li>
            <li id="nn">南宁</li>
            <li>上海</li>
        </ul>
        <button id="btn">杭州</button>
        <button id="btn2">深圳前面插入杭州</button>
        <button id="btn3">替换南宁节点</button>
        <button id="btn4">删除南宁</button>
        <button id="btn5">读取代码</button>
        <button id="btn6">更改南宁节点内容</button>
        <button id="btn7">添加一个苏杭</button>
        <button id="btn8">推荐方法：添加一个苏杭节点</button>
    </body>
    <script type="text/javascript">
        window.onload = function() {
            myClick("btn", function() {
                var city = document.getElementById("city");
                var li = document.createElement("li");
                var text = document.createTextNode("杭州");
                li.appendChild(text);
                city.appendChild(li);
                //appendChild添加节点
            });
            myClick("btn2", function() {
                var city = document.getElementById("city");
                var li = document.createElement("li");
                // createElement创建一个元素
                var sz = document.getElementById("sz");
                var text = document.createTextNode("杭州");
                // createTextNode创建一个文本
                li.appendChild(text);
                city.insertBefore(li,sz);
                // insertBefore节点添加到前面
            });
            myClick("btn3", function() {
                var city = document.getElementById("city");
                var li = document.createElement("li");
                var nn = document.getElementById("nn");
                var text = document.createTextNode("苏杭");
                li.appendChild(text);
                city.replaceChild(li,nn);
                // replaceChild替换节点
            });
            myClick("btn4", function() {
                var city = document.getElementById("city");
                var nn = document.getElementById("nn");
                city.removeChild(nn)
                // removeChild删除节点
            });
            myClick("btn5", function() {
                var city = document.getElementById("city");
                alert(city.innerHTML);
            });
            myClick("btn6", function() {
                var nn = document.getElementById("nn");
                nn.innerHTML="难方";
            });
            myClick("btn7", function() {
                var city = document.getElementById("city");
                city.innerHTML +="<li>苏杭</li>";
            });
            myClick("btn8", function() {
                var city = document.getElementById("city");
                var li = document.createElement("li");
                li.innerHTML="苏杭";
                city.appendChild(li);
            });
        }
        function myClick(idStr,fun){
            var btn =document.getElementById(idStr);
            btn.onclick=fun;
        }
    </script>
</html>
代码改变了我们，也改变了世界