Dom5 添加节点 & 删除节点
2017-03-16 本文已影响0人
maomizone
-
父级.appendChild(子节点)
1 先把元素从原有父级上删掉
2 添加到新父级末尾
-
父级.insertBefore(子节点， 在谁之前)
添加元素到之前
-
父级.removeChild(子节点)
删除元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li{
width: 200px;
height: 20px;
background: lightgrey;
cursor: pointer;
margin: 5px;
}
li:hover{
color: red;
}
</style>
<script>
window.onload = function(){
var btn = document.getElementById("btn1");
var ul = document.getElementById("ul1");
var input = document.getElementById("text1");
var lis;
btn.onclick = function(){
lis = ul.getElementsByTagName("li");
var li = document.createElement("li");
li.innerHTML = input.value;
if(lis.length > 0){
ul.insertBefore(li, lis[0]); // 插到首位
}else{
ul.appendChild(li); // 插到末尾
}
lis = ul.getElementsByTagName("li");
for(var i =0; i<lis.length; i++){
lis[i].onclick = function(){
this.parentNode.removeChild(this); // 删除节点
};
}
}
}
</script>
</head>
<body>
<input id="text1" type="text">
<button id="btn1">add</button>
<ul id="ul1">
</ul>
</body>
</html>
