HTML与JavaScript交互示例-优快云博客

<!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 #000000;
margin: 0 auto;
}
ul li{
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #000000;
margin: 10px;
float: left;
}
.box{
width: 400px;
margin: 40px auto;
}
button{
width: 100px;
height: 40px;
margin:20px 10px;
}
</style>
</head>
<body>
<ul>

</ul>
<div class="box">
<button data-type="yy">英语</button>
<button data-type="yw">语文</button>
<button data-type="sx">数学</button>
<button data-type="ty">体育</button>
<button data-type="wl">物理</button>
<button data-type="ms">美术</button>

</div>
<script>

var uul=document.getElementsByTagName("ul")[0];
var btn=document.getElementsByTagName("button");
var nli;

for(var i= 0;i<btn.length;i++){

btn[i].οnclick=function () {

var hasLi=false;

nli= document.createElement("li");
nli.innerHTML=this.innerHTML+"<span> ✖ </span>";

var type=this.getAttribute("data-type");
nli.setAttribute("data-type",type);

var ali=uul.getElementsByTagName("li");
for(var i=0;i<ali.length;i++){
if(ali[i].getAttribute("data-type")==this.getAttribute("data-type")){
hasLi=true;
break;
}else{
hasLi=false;
}
}
if(hasLi==false){
uul.append(nli);
}
// 删除
var span= nli.getElementsByTagName("span")[0];
span.οnclick=function () {
uul.removeChild(this.parentNode);
}
}
}

</script>
</body>
</html>

添加