Js-dom增删改

最新推荐文章于 2024-07-22 15:13:59 发布

flowerxxxxx

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量408

点赞数

分类专栏： Js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/flowerxxxxx/article/details/122794247

版权

Js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function (){
            //创建一个广州节点，添加到#city下
            myClick("btn01",function (){
                //创建广州节点<li>广州</li>
                //创建li元素节点
                /*
                * 用于创建一个元素节点对象
                * 需要一个标签名作为参数，将会根据该标签名创建元素节点对象
                * 并将创建好的对象组我欸返回值返回
                * */
                var li = document.createElement("li");
                /*
                * 创建广州文本节点
                * */
                var gzText = document.createTextNode("广州");
                //将gzText设置为li的子节点

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

                //将广州添加到city下
                city.appendChild(li);

            })

            //将广州插入#北京的前面
            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");

                city.insertBefore(li,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);
            })

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

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

                // city.removeChild(bj);


                bj.parentNode.removeChild(bj);

            })

            //读取city内的html代码
            myClick("btn05",function (){
                //获取city
                var city = document.getElementById("city");

                alert(city.innerHTML);

            })

            //设置bj内部的代码
            myClick("btn06",function (){
                //获取id为bj的节点
                var bj = document.getElementById("bj");

                bj.innerHTML = "曹县";
            })

            myClick("btn07",function (){

                //向city中添加广州
                //获取city
                var city = document.getElementById("city");

                /*
                * 使用innerhtml也可以完成dom操作
                * */
                // city.innerHTML += "<li>广州</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>

        </div>
    </div>
    <div id="btnList">
        <div><button id="btn01">创建一个”广州“节点，添加到#city下</button></div>
        <div><button id="btn02">将广州插入#北京的前面</button></div>
        <div><button id="btn03">使用广州节点替换北京节点</button></div>
        <div><button id="btn04">删除bj节点</button></div>
        <div><button id="btn05">读取city内的html代码</button></div>
        <div><button id="btn06">设置bj内部的代码</button></div>
        <div><button id="btn07">创建一个”广州“节点，添加到#city下</button></div>
    </div>
</body>
</html>

在这里插入图片描述

flowerxxxxx

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> window.onload = function (){ //创建一个广州节点，添加到#city下 myCl
复制链接

扫一扫

专栏目录