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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。