DOM 节点 课程表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 400px;
height: 400px;
border: 1px solid #000;
}
li{
width: 80px;
height: 40px;
list-style: none;
text-align: center;
line-height: 40px;
border: 1px solid #000;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<!--<li>语文<span>X</span></li>-->
</ul>
<button data-type="yw">语文</button>
<button>数学</button>
<button>英语</button>
<button>物理</button>
<button>化学</button>
<button>生物</button>
<button>政治</button>
<button>历史</button>
<button>地理</button>
<script>
var ul=document.getElementsByTagName("ul")[0];
//创建节点
//var nli=document.createElement("li");
//修改节点内容
//nli.innerHTML="yw";
//添加节点
//ul.append(nli);
var btns=document.getElementsByTagName("button");
//var ul=document.getElementsByTagName("ul")[0];
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
//alert(this.innerHTML);
var hasLi=false;
//点击按钮，添加对应课程内容
var nli=document.createElement("li");
nli.innerHTML=this.innerHTML+"<span>X</span>";
//通过innerHTML来判断
var aLi=ul.getElementsByTagName("li");
//console.log(aLi[0].innerHTML.slice(0,14));
for(var i=0;i<aLi.length;i++){
if(this.innerHTML==aLi[i].innerHTML.slice(0,-14)){
hasLi=true;
break;
}else{
hasLi=false;
}
}
if(hasLi==false){
ul.append(nli);
}
//点击X，从ul中删除li;
var span=nli.getElementsByTagName("span")[0];
span.onclick=function(){
ul.removeChild(this.parentNode);
}
}
}
</script>
</body>
</html>
