JS添加按钮交互

最新推荐文章于 2024-07-07 20:19:55 发布

畅游知识海洋

最新推荐文章于 2024-07-07 20:19:55 发布

阅读量2.9k

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/hutianyou123/article/details/78309870

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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