实现span内容增加和删除操作,代码如下:
<!DOCTYPE html>
<html>
<head>
<title>新增按钮</title>
</head>
<body>
<div id='container'>
<button id="btn-add">新增</button>
<div id="wrap"></div>
</div>
<script type="text/javascript">
window.onload = function(){
var btnAdd = document.getElementById("btn-add");
btnAdd.addEventListener("click",function(){
var wrap = document.getElementById('container');
var length = wrap.getElementsByClassName('content-wrap').length;
if(length<10){
var contentWrap = document.createElement('div');
console.log(contentWrap);
contentWrap.setAttribute('class','content-wrap');
var spanNode = document.createElement('span');
var spanText = document.createTextNode('content');
spanNode.appendChild(spanText);
var btnDel = document.createElement('button');
var btnDelText = document.createTextNode('删除');
btnDel.appendChild(btnDelText);
btnDel.setAttribute('id','btn-del');
contentWrap.appendChild(spanNode);
contentWrap.appendChild(btnDel);
wrap.appendChild(contentWrap);
}
btnDel.addEventListener("click", function(){
if(wrap.getElementsByClassName('content-wrap').length>1){
wrap.removeChild(this.parentNode);
}
},false);
},false);
}
</script>
</body>
</html>