增删改查

最新推荐文章于 2024-08-11 09:30:00 发布

上冬二十二

最新推荐文章于 2024-08-11 09:30:00 发布

阅读量74

点赞数

本文链接：https://blog.csdn.net/qq_44941776/article/details/114459762

版权

关键词由CSDN通过智能技术生成

练手专栏收录该内容

5 篇文章 0 订阅

订阅专栏

练手DOM实现简单的增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增删改查</title>
    <style>
        ul li{
            list-style: none;
            width: 100px;
            height: 30px;
            margin-left: 10px;
            float: left;
            text-align: center;
            line-height: 30px;
            background: greenyellow;
        }

    </style>
</head>
<body>
    <div>
        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>深圳</li>
        </ul>
    </div>
    <br>
    <br>
    <br>
    <button id="btn0">增加一个重庆</button>
    <button id="btn1">删除北京</button>
    <button id="btn2">修改北京的html</button>
    <button id="btn3">在北京前添加重庆</button>
    <button id="btn4">使用重庆节点替换北京节点</button>
    <button id="btn5">读取city内的html代码</button>
    <script>
        window.onload = function(){
            //btn0
            myClick("btn0",function(){
                var li = document.createElement("li");
                var city = document.getElementById("city");
                li.innerHTML = "重庆";
                    city.appendChild(li);
                });
            //btn1
                myClick("btn1",function(){
                    var bj = document.getElementById("bj");
                    city.removeChild(bj);
                });
            //btn2
                myClick("btn2",function(){
                    var bj = document.getElementById("bj");
                    bj.innerHTML = "我是修改了的北京"

                });
            //btn3
                myClick("btn3",function(){
                    var li = document.createElement("li");
                    li.innerHTML = "重庆";
                    city.insertBefore(li,bj);
                });
            //btn4
                myClick("btn4",function(){
                    var li = document.createElement("li");
                    li.innerHTML = "重庆";
                    var bj = document.getElementById("bj");
                    city.replaceChild(li,bj);
                });
            //btn5
            myClick("btn5",function(){
                alert(city.innerHTML);
            });
        }
        var city = document.getElementById("city");
        function myClick(btn,fun){
            var btn = document.getElementById(btn);
            btn.onclick = fun;
        }
    </script>
</body>
</html>