JS实例—DOM的增删改

  • A+
所属分类:Web前端

JS实例—DOM的增删改

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* *{
margin:0;
padding:0;
}*/
#total{
width:400px;
border:1px solid black;
margin:0 auto;
}
#city li{
list-style: none;
float: left;
margin-left:20px;
margin-bottom: 20px;
border:1px solid black;
background-color: #ff6700;
}
/*解决高度塌陷问题*/
.clearfix::before,.clearfix::after{
Content:"";
Display:table;
Clear:both
}
.btnList button{
margin-top: 20px;
width:300px;
}
</style>
</head>
<body>
<div id="total" class="clearfix">
<div id="inner">
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>天津</li>
<li>杭州</li>
</ul>
</div>
</div>
<div class="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><button id="btn07">向city中添加广州-方法1</button></div>
<div><button id="btn08">向city中添加广州-方法2</button></div>
</div>
</body>
</html>
<script>
function myClick(idStr,fun) {
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
//创建一个“广州”节点添加到#city下
myClick("btn01",function () {
//创建广州节点<li>广州</li>
//创建li元素节点
var li=document.createElement("li");
//创建文本节点
var cityText=document.createTextNode("广州");
//将广州子节点添加到li中
li.appendChild(cityText);
//获取id为city的节点
var city=document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});

//将“广州”节点插入到#bj前面
//先绑定按钮2
myClick("btn02",function () {
//创建一个广州节点
var li=document.createElement("li");
var cityText=document.createTextNode("广州");
li.appendChild(cityText);
//获取北京的节点id,必须父节点调用
// 用法: 旧节点的父节点.insertBefore(新节点,旧节点)
var bj=document.getElementById("bj");
var city=document.getElementById("city");
city.insertBefore(li,bj);
});

//使用“广州”节点替换#bj节点
myClick("btn03",function () {
//创建一个广州节点
var li=document.createElement("li");
var cityText=document.createTextNode("广州");
li.appendChild(cityText);
//获取北京节点和其父节点
var bj=document.getElementById("bj");
var city=document.getElementById("city");
//替换北京节点
// 用法: 旧节点的父节点.replaceChild(新节点,旧节点)
city.replaceChild(li,bj);
});

// 删除#bj节点
myClick("btn04",function () {
var bj=document.getElementById("bj");
var city=document.getElementById("city");
// 用法: 父节点.removeChild(删除子节点);
//方法一:city.removeChild(bj);
//方法二: 子节点.parentNode.removeChild(子节点); 子节点的父辈节点
bj.parentNode.removeChild(bj);
});

// 读取#city内的HTML代码
myClick("btn05",function () {
var city=document.getElementById("city");
alert(city.innerText);
});

//设置#bj内的HTML代码
myClick("btn06",function () {
var bj=document.getElementById("bj");
bj.innerHTML="东京";
});

//向city添加广州,使用innerHTML也可以进行DOM的增删改
//反观第一种方法,这种方法更好,但动作太大,所有节点重新设置
myClick("btn07",function () {
var city=document.getElementById("city");
city.innerHTML+="<li>广州</li>";
});

//向city添加广州 折中的方法---推荐使用!!!!!
myClick("btn08",function () {
var city=document.getElementById("city");
var li=document.createElement("li");
//向li中设置文本
li.innerHTML="广州";
//将li添加到city中
city.appendChild(li);
});
</script>