dom的增刪改

阿新 • • 發佈：2020-09-13

<!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>