js点击事件增删p标签_p标签加点击事件-CSDN博客

本文链接：https://blog.csdn.net/qianqianyunyan/article/details/126492391

js点击事件增删p标签:

1.先创建10条数据；
2.增数据（无限制）
3.删数据（当无数据条可删时，显示提示框）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js点击事件增删p标签</title>
</head>
<body>
    <button id="btn1">增</button>
    <button id="btn2">删</button>
      <script>
        var container=document.createElement('div')
        container.id='container';
        document.body.appendChild(container)
        for(var i=1;i<=10;i++){
            var p=document.createElement('p');
            p.innerHTML='数据条'+i
            p.id='p'+i;
            document.getElementById('container').appendChild(p)
        }
        var btn1=document.getElementById('btn1')
        var btn2=document.getElementById('btn2')
        
        btn1.onclick=function(){
            var len=document.querySelectorAll('p');
            var newp=document.createElement('p');
            // 填充内容
            newp.innerHTML='数据条'+(len.length+1)
            newp.id='p'+(len.length+1)
            // 插入节点
            document.getElementById('container').appendChild(newp)
        }
        btn2.onclick=function(){
            var last=document.getElementById('container').lastChild
            if(last!=null){
                last.remove();
            }else{
                alert('无数据可删除！')
            }
        }
      </script>
</body>
</html>