js基础_63、DOM增删改

DOM相关操作

使用innertHtml也可以完成DOM相关操作，不过它是把全部内容删了重新加载的，动静太大，一般结合DOM相关操作的方式同时使用。

document.createElement()

可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回。

document.createTextNode()

可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。

appendChild()

—-向一个父节点中添加一个新的子节点，
—-语法：父节点.appendChild(子节点);

insertBefore()

—-在指定的子节点(已有的子节点)前插入新的子节点。
—-语法：
父节点.insertBefore(新的子节点，旧的子节点);

replaceChild()

—-可以使用指定的子节点替换已有的子节点。
—-语法：
父节点.replaceChild(新的子节点，已有的子节点);

removeChild()

—-可以删除一个子节点。
—-语法：
父节点.removeChild(指定的子节点);

或者
指定的子节点.parentNode.removeChild(指定的子节点);

具体操作实例代码：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="./css/css.css" />
        <script type="text/javascript">
            window.onload=function(){
            //创建一个"广州"节点,添加到#city下
            myClick("btn01",function(){
//                //创建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);
                //方式2
                //创建li元素节点
                var li=document.createElement("li");
                li.innerHTML="广州";
                //获取id为city的节点
                var city=document.getElementById("city");
                //将广州添加到city下
                city.appendChild(li);
            });
            //将"广州"节点插入到#bj前面
            myClick("btn02",function(){
                //创建li元素节点
                var li=document.createElement("li");
                //创建广州文本节点
                var gzText=document.createTextNode("广州");
                //将gzText设置为li的子节点
                li.appendChild(gzText);
                //获取id为city的节点
                var city=document.getElementById("city");
                //通过父节点的方法将新的子节点插入到已有的子节点前
                city.insertBefore(li,bj);
            });
            //使用"广州"节点替换#bj节点
            myClick("btn03",function(){
                //创建li元素节点
                var li=document.createElement("li");
                //创建广州文本节点
                var gzText=document.createTextNode("广州");
                //将gzText设置为li的子节点
                li.appendChild(gzText);
                //获取id为bj的节点
                var bj=document.getElementById("bj");
                //获取id为city的节点
                var city=document.getElementById("city");
                //通过父节点的方法用新的子节点替换已有的子节点
                city.replaceChild(li,bj);
            });
            //删除#bj节点
            myClick("btn04",function(){
                //获取id为bj的节点
                var bj=document.getElementById("bj");
                //通过父节点的方法删除指定的子节点
                bj.parentNode.removeChild(bj);
            });
            //读取#city内的HTML代码
            myClick("btn05",function(){
                //获取id为bj的节点
                var city=document.getElementById("city");
                alert(city.innerHTML);
            });
            //设置#bj内的HTML代码
            myClick("btn06",function(){
                //获取id为bj的节点
                var bj=document.getElementById("bj");
                //通过父节点的方法删除指定的子节点
                bj.innerHTML="成都";
            });
            }
            //绑定单击响应函数的函数
            var myClick=function(nodeId,fun){
                var nownode=document.getElementById(nodeId);
                nownode.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>

css样式：

@CHARSET "UTF-8";
body {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
button {
    width: 300px;
    margin-bottom: 10px;
}
#btnList {
    float:left;
}
#total{
    width: 450px;
    float:left;
}
ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
.inner li{
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    background-color: #99ff99;
    float:left;
}
.inner{
    width:400px;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    padding: 10px;
    float: left;
}
posted @   青仙  阅读(64)  评论(0)  编辑  收藏  举报
相关博文：
· js基础_59、DOM查询
· js基础_56、DOM简介
· JavaScript dom增删改
· JavaScript 学习-34.HTML DOM 创建/插入/删除/替换元素
· 【JavaScript36】HTML DOM创建/插入/删除/替换元素
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示