JS添加按钮交互

来源：互联网发布：linux exp continue 编辑：程序博客网时间：2024/06/06 09:15

实现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>

这里写图片描述

阅读全文

0 0