createElement("li") 创建节点
createTextNode("广州") 创建文本节点
appendChild(gzText) 添加子节点
insertBefore(a,b) 在b节点前面插入a节点
replaceChild(a,b) b节点替换a节点
removeChild(bj) 删除节点
image.png
<!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>dom的增删改</title>
<script>
function myClick(idStr,fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
};
window.onload = function(){
// 创建一个广州节点，添加到city下
myClick("btn1",function(){
// 创建li节点
var li = document.createElement("li");
// 创建文本节点
var gzText = document.createTextNode("广州");
// 添加子节点
li.appendChild(gzText);
var city = document.getElementById("city");
city.appendChild(li);
});
// 将广州节点插入到bj前面
myClick("btn2",function(){
// 创建广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
var city = document.getElementById("city");
var bj = document.getElementById("bj");
/*
insertBefore(a,b)
在b节点前面插入a节点
*/
city.insertBefore(li,bj);
});
// 广州节点替换bj节点
myClick("btn3",function(){
// 创建广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
var city = document.getElementById("city");
var bj = document.getElementById("bj");
/*
replaceChild(a,b)
b节点替换a节点
*/
city.replaceChild(li,bj);
});
// 删除bj节点
myClick("btn4",function(){
var bj = document.getElementById("bj");
// var city = document.getElementById("city");
// city.removeChild(bj);
// 更常用
bj.parentNode.removeChild(bj);
});
// 读取#city的HTML代码
myClick("btn5",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
/*
<li>广州</li>
<li>上海</li>
<li>天津</li>
<li>南京</li>
*/
// 设置#bj内的HTML代码
myClick("btn6",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
// innerTtml添加广州
myClick("btn7",function(){
var city = document.getElementById("city");
// city.innerHTML += "<li>广州</li>";
var li = document.createElement("li");
li.innerHTML ="广州";
city.appendChild(li);
});
};
</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 id="btnList">
<div><button id="btn1">创建一个广州节点，添加到city下</button></div>
<div><button id="btn2">将广州节点插入到bj前面</button></div>
<div><button id="btn3">广州节点替换bj节点</button></div>
<div><button id="btn4">删除bj节点</button></div>
<div><button id="btn5">读取#city的HTML代码</button></div>
<div><button id="btn6">设置#bj内的HTML代码</button></div>
<div><button id="btn7">innerTtml添加广州</button></div>
</div>
</div>
</body>
</html>
网友评论