JS实现增、删、改功能

最新推荐文章于 2024-06-10 21:57:03 发布

喵俺第一专栏

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量686

点赞数 2

分类专栏： # Html+css+js项目文章标签： javascript html 前端

本文链接：https://blog.csdn.net/dengfengling999/article/details/122502929

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

创建一个“广州”节点，添加到#city下

将“广州”节点插入到#bj前面

使用广州节点替换#bj节点

删除#bj节点

读取#city内的HTML

设置#bj内的HTML

创建一个“广州”节点，添加到#city下用法2

<!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 () {
            //1创建一个“广州”节点，添加到#city下
            myClick("btn01", function () {
                //创建广州节点  <li>广州</li>
                //创建li元素节点  创建广州文本节点
                var li = document.createElement("li");
                var gztext = document.createTextNode("广州");
                //将广州dzText设置为li的子节点
                li.appendChild(gztext);

                //获取city的节点
                var city = document.getElementById("city");
                //将广州节点添加到city下
                city.appendChild(li);
            });
            //2将“广州”节点插入到#bj前面
            myClick("btn02", function () {
                //创建一个广州节点
                var li = document.createElement("li");
                var gztext = document.createTextNode("广州");
                li.appendChild(gztext);

                //获取北京节点
                var bj = document.getElementById("bj");
                //获取city节点
                var city = document.getElementById("city");
                city.insertBefore(li, bj);//在指定的子节点前插入新节点
            });

            //3使用广州节点替换#bj节点
            myClick("btn03", function () {
                //创建一个广州节点
                var li = document.createElement("li");
                var gztext = document.createTextNode("广州");
                li.appendChild(gztext);

                //获取北京节点
                var bj = document.getElementById("bj");
                //获取city节点
                var city = document.getElementById("city");

                city.replaceChild(li, bj);//使用指定的子节点替换已有的节点

            });

            //4删除#bj节点
            myClick("btn04", function () {
                //获取北京节点
                var bj = document.getElementById("bj");
                //获取city节点
                var city = document.getElementById("city");

                city.removeChild(bj);//删除子节点

                bj.parentNode.removeChild(bj);//用在不知道父节点来删除子节点，不用单独获取city
            });

            //5读取#city内的HTML
            myClick("btn05", function () {
                //获取city节点
                var city = document.getElementById("city");
                alert(city.innerHTML);
            });

            //6设置#bj内的HTML
            myClick("btn06", function () {
                //获取北京节点
                var bj = document.getElementById("bj");
                bj.innerHTML = "昌平";
            });

            //7创建一个“广州”节点，添加到#city下用法2

            myClick("btn07", function () {
                /*
                  使用innerHTML也可以完成DOM的增删该相关操作
              
               */
                //创建li元素节点  创建广州文本节点
                var li = document.createElement("li");

                //向li中设置文本
                li.innerHTML = "广州";
                //将li添加到city中
                city.appendChild(li);
            });
        };

        function myClick(idStr, fun) {
            var btn = document.getElementById(idStr);//获取btn对象
            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>
    <br>
    <div id="btnList">
        <div><button id="btn01">创建一个“广州”节点，添加到#city下</button></div><br>
        <div><button id="btn02">将“广州”节点插入到#bj前面</button></div><br>
        <div><button id="btn03">使用广州节点替换#bj节点</button></div><br>
        <div><button id="btn04">删除#bj节点</button></div><br>
        <div><button id="btn05">读取#city内的HTML</button></div><br>
        <div><button id="btn06">设置#bj内的HTML</button></div><br>
        <div><button id="btn07">创建一个“广州”节点，添加到#city下用法2</button></div>
    </div>
</body>

</html>

喵俺第一专栏

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS实现增、删、改功能

创建一个“广州”节点，添加到#city下将“广州”节点插入到#bj前面使用广州节点替换#bj节点删除#bj节点读取#city内的HTML设置#bj内的HTML创建一个“广州”节点，添加到#city下用法2<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte
复制链接

扫一扫