经典dom增删改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload = function () {
// 创建一个广州节点,添加到#city下
myClick("btn01", function () {
//1、创建广州节点(创建li元素节点,创建广州文本节点)
/*
document.createElement();
可以用于创建一个元素节点对象,
它需要一个标签名作为参数,将会根据该标签名创建元素节点对象
并将创建好的对象作为返回值返回
*/
var li = document.createElement("li");
//2、将广州添加到city下
/*
可以用来创建一个文本节点对象
需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
*/
var gzText = document.createTextNode("广州");
/*
将gzText设置li的子节点
appendChild()
-向一个父节点中添加一个新的子节点
-用法:父节点.appendChild(子节点)
*/
li.appendChild(gzText);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
// 将广州节点插入到#bj前面
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");
/*
insertBefore()
-可以在指定的子节点前插入新的子节点
-语法:
父节点:insertBefore(新节点,旧节点);
*/
city.insertBefore(li, bj);
});
// 使用广州节点替换#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");
/*
insertBefore()
-可以在指定的子节点前替换新的子节点
-语法:
父节点:replaceChild(新节点,旧节点);
*/
city.replaceChild(li, bj);
});
// 删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
/*
removeChild()
-可以删除一个子节点
-语法:
父节点,removeChild(子节点)
子节点:.parentNode.removeChild(子节点);
*/
// city.removeChild(bj);
bj.parentNode.removeChild(bj);
});
// 读取#city内的HTML代码
myClick("btn05",function(){
//获取city
var city = document.getElementById("city");
alert(city.innerHTML);
});
// 设置#bj内的HTML代码
myClick("btn06",function(){
//获取city
var city = document.getElementById("city");
bj.innerHTML = "昌平";
});
};
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">将广州节点插入到#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>