Dom增删改

最新推荐文章于 2022-04-07 12:39:27 发布

夹心爱吃果冻

最新推荐文章于 2022-04-07 12:39:27 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/weixin_43168302/article/details/118963267

版权

<ul id="city">
    <li id="bj">北京</li>
    <li id="sh">上海</li>
    <li id="dj">东京</li>
    <li id="sr">首尔</li>
</ul>
<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">创建一个"广州"节点，添加到city下</button></div>

//1.创建一个"广州"节点，添加到city下
var btn01=document.getElementById('btn01');
btn01.οnclick=function (){
    //1.先创建li
    var li=document.createElement("li");
    //2.创建广州节点
    var node=document.createTextNode("广州");
    //3.将text设置为li的子节点
    li.appendChild(node);
    //4.获取city节点
    var city=document.getElementById("city");
    city.appendChild(li)
}

//将"广州"节点插入到#bj前面
var btn02=document.getElementById("btn02");
btn02.οnclick=function (){
    var li=document.createElement("li");
    var text=document.createTextNode("广州");
    li.appendChild(text);
    var bj=document.getElementById("bj");
    var city=document.getElementById("city");
    city.insertBefore(li,bj)
}

//使用"广州"节点替换#bj节点
var btn03=document.getElementById("btn03");
btn03.οnclick=function (){
 var li=document.createElement("li");
 var text=document.createTextNode("广州");
 li.appendChild(text);
 var bj=document.getElementById("bj");
 var city=document.getElementById("city");
 city.replaceChild(li,bj)
}

var btn04=document.getElementById("btn04");
btn04.οnclick=function (){
    var li=document.getElementById("bj");
    var city=document.getElementById("city");
    city.removeChild(li)
}