js入门动态添加删除标签

时间 2019-12-07

原文原文链接

js、动态添加删除

运用下边几个标签实现动态建立标签，删除标签，你们要考虑的是内存里边发生的状况css

createElemen建立元素；html
appendChild追加元素；app
parentNode返回指定节点的父节点；code
removeChild删除指定的元素节点。htm

第一步 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/xwqcq6onutf-8