dom增删改

CV键都碎了

于 2021-04-27 14:10:29 发布

阅读量109

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/sinat_33940108/article/details/116199888

版权

JavaScript 专栏收录该内容

21 篇文章 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>Document</title>
    <script>
    window.onload = function(){

        //创建一个“广州”节点,添加到city下
        myClick("btn01",function(){
            //1.创建广州节点
            
                /* 可以创建一个元素节点对象
                需要一个标签名作为参数，根据该标签创造元素节点对象
                并将创建好的对象返回。 */
            
            var li = document.createElement("li");
           
            //2.将广州添加到city下
            /* document.createTextNode()
            可以用来创建一个文本节点对象
            需要一个文本内容返回参数，将会根据该内容创建文本节点返回 */
            var GZtext = document.createTextNode("广州");

            /* appendChild()
            向一个父节点添加一个新的子节点
            父节点.appendChild(子节点) */
            li.appendChild(GZtext);
            //获取id为city的节点
            var city = document.getElementById("city");
            //将广州添加到city下
            city.appendChild(li);
        });

        //将“广州”节点插入到#bj前面
        myClick("btn02", function(){
            //创建一个广州
            var li = document.createElement("li");
            var GZtext = document.createTextNode("广州")
            li.appendChild(GZtext);

            //获取id为bj的节点
            var bj = document.getElementById("bj");

            //获取city
            var city = document.getElementById("city");

            /* insertBefore()
            可以在指定子节点前面插入新的子节点
            语法：   父节点.insertBefore(新节点，旧节点); */
            city.insertBefore(li,bj);

        })

        //将“广州”节点替换bj节点
        myClick("btn03", function(){
            //创建一个广州
            var li = document.createElement("li");
            var GZtext = document.createTextNode("广州")
            li.appendChild(GZtext);

            //获取id为bj的节点
            var bj = document.getElementById("bj");
            //获取city
            var city = document.getElementById("city");

            city.replaceChild(li,bj);
            

        })

         //将“北京”节点删除
         myClick("btn04" ,function(){
            //获取id为bj的节点
            var bj = document.getElementById("bj");
            //获取city
            var city = document.getElementById("city");

            // city.removeChild(bj);
            bj.parentNode.removeChild(bj);
        })

        myClick("btn05",function(){
            var city = document.getElementById("city");
            alert(city);
        })

        myClick("btn06",function(){
            var city = document.getElementById("city");
            alert(city.innerHTML);
        })

        myClick("btn07",function(){
            var city = document.getElementById("city");

            //此方法不用手动寻找父节点，直接调用。但是此方法为全部替换，改动太大
            // city.innerHTML += "<li>广州</li>"
            var li = document.createElement("li");
            li.innerHTML = "广州";
            city.appendChild(li);
        })
    };

    function myClick(idStr,fun){
        var btn = document.getElementById(idStr);
        btn.onclick = fun;
    }
</script>
</head>
<body>
    

    <div id = "total">
        <div class = "inner">
            <p>你最喜欢哪个城市</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>杭州</li>
                <li>吉林</li>
                <li>上海</li>
            </ul>
            <br>
            <br>
        </div>
    </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">设置插入广州</button></div>
    </div>
</body>
</html>

CV键都碎了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom增删改

此程序对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"> &l
复制链接

扫一扫

专栏目录