dom增删改

最新推荐文章于 2024-08-14 19:53:13 发布

直条纹先生

最新推荐文章于 2024-08-14 19:53:13 发布

阅读量107

点赞数

分类专栏： web前端文章标签： javascript 前端服务器

本文链接：https://blog.csdn.net/weixin_45936141/article/details/125563877

版权

web前端专栏收录该内容

15 篇文章 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 type="text/javascript">

        window.onload = function () {

            // 创建一个广州节点，添加到#city下
            myClick("btn01", function () {

                //1、创建广州节点（创建li元素节点，创建广州文本节点）
                /*
                 document.createElement();
                可以用于创建一个元素节点对象，
                它需要一个标签名作为参数，将会根据该标签名创建元素节点对象
                并将创建好的对象作为返回值返回
                */
                var li = document.createElement("li");

                //2、将广州添加到city下
                /*
                可以用来创建一个文本节点对象
                需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

                */

                var gzText = document.createTextNode("广州");
                /*
                将gzText设置li的子节点

                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");

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

            });


            // 删除#bj节点
            myClick("btn04",function(){
                //获取id为bj的节点
                var bj = document.getElementById("bj");

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

                 /*
                 removeChild()
                 -可以删除一个子节点
                 -语法：
                 父节点，removeChild(子节点)

                 子节点：.parentNode.removeChild(子节点);
                 
                 */
                // city.removeChild(bj);
                bj.parentNode.removeChild(bj);

            });
            // 读取#city内的HTML代码
            myClick("btn05",function(){

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

                   alert(city.innerHTML);

            });
            // 设置#bj内的HTML代码

            myClick("btn06",function(){

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

                 bj.innerHTML = "昌平";
            });

            
        };

        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>
        </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>
</body>

</html>