js入门动态添加删除标签

最新推荐文章于 2022-11-17 23:32:19 发布

weixin_33981932

最新推荐文章于 2022-11-17 23:32:19 发布

阅读量383

点赞数

原文链接：https://segmentfault.com/a/1190000010184514

版权

js、动态添加删除

运用下边几个标签实现动态创建标签，删除标签，大家要考虑的是内存里边发生的情况

createElemen创建元素；
appendChild追加元素；
parentNode返回指定节点的父节点；
removeChild删除指定的元素节点。

第一步 HTML写法

<html>
    <head>
        <title>动态创建元素</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="box">
            
        </div>
        <input type="text" id="txt">
        <input type="button" id="btn" value="点击">
    </body>
</html>

css设置属性

#box{
    width：200px;
    height:200px;
    border:1px solid #ccc;
}

动态创建、删除元素

                //获取元素的ID
                var oBox=document.getElementById("box");
                var oTxt=document.getElementById("txt");
                var oBtn=document.getElementById("btn");
                
                //添加
                oBtn.onclick=function(){
                    var pp =document.createElement("p");
                    var del=document.createElement("input");
                    del.type="button";
                    del.value="删除";
                    wenben=oTxt.value;
                    pp.innerHTML=wenben;
                    pp.style.color="red";
                    oBox.appendChild(pp);
                    pp.appendChild(del);
                    //删除
                    del.onclick=function(){
                        pp.parentNode.removeChild(pp);
                    }
                        oTxt.value="";
                }

考虑一下正常的思路，我们通常是通过for循环来添加删除、但是那样肯定是执行不了代码的！
它为什么能把元素给删除掉呢，是因为咱们创建元素的时候就已经给他把那个click方法给添加进那个删除元素里边去了！
看一下下边的代码你就能明白了吧！

//获取元素的ID
                var oBox=document.getElementById("box");
                var oTxt=document.getElementById("txt");
                var oBtn=document.getElementById("btn");
                
                //添加
                oBtn.onclick=function(){
                    var pp =document.createElement("p");
                    var del=document.createElement("input");
                    del.type="button";
                    del.value="删除";
                    wenben=oTxt.value;
                    pp.innerHTML=wenben;
                    pp.style.color="red";
                    
                    //删除
                    del.onclick=function(){
                        pp.parentNode.removeChild(pp);
                    }
                        oTxt.value="";
                    oBox.appendChild(pp);
                    pp.appendChild(del);
                }

就是这个样子！有点眼熟，喜欢的话，点一下赞，谢谢！
下边附上演示地址。。。
http://runjs.cn/detail/xwqcq6on

weixin_33981932

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js入门动态添加删除标签

js、动态添加删除运用下边几个标签实现动态创建标签，删除标签，大家要考虑的是内存里边发生的情况createElemen创建元素；appendChild追加元素；parentNode返回指定节点的父节点；removeChild删除指定的元素节点。第一步 HTML写法<html> <head>...
复制链接

扫一扫

js入门动态添加删除标签

js、动态添加删除

第一步 HTML写法

css设置属性

动态创建、删除元素

“相关推荐”对你有帮助么？