Js-dom增删改
发布时间：2022-08-19 12:29
<!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元素节点
/*
* 用于创建一个元素节点对象
* 需要一个标签名作为参数，将会根据该标签名创建元素节点对象
* 并将创建好的对象组我欸返回值返回
* */
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
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>
