js入門動態添加刪除標簽

guqiu 發布于2019-08-20 17:59 / 2746人閱讀

摘要：動態添加刪除運用下邊幾個標簽實現動態創建標簽，刪除標簽，大家要考慮的是內存里邊發生的情況創建元素追加元素返回指定節點的父節點刪除指定的元素節點。

js、動態添加刪除

運用下邊幾個標簽實現動態創建標簽，刪除標簽，大家要考慮的是內存里邊發生的情況

createElemen創建元素；

appendChild追加元素；

parentNode返回指定節點的父節點；

removeChild刪除指定的元素節點。

第一步 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

GPU云服務器云服務器 js動態添加標簽動態添加刪除 js頁面添加標簽 js實現添加標簽頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83987.html

微信小程序：入門基礎教程

摘要：準備工作要開發微信小程序之前，需要做一些準備工作，首先進入然后再進入，接下來就解壓源碼包和安裝微信開發工具，安裝好開發軟件之后，在桌面可以看到然后點擊進入需要手機微信掃碼確認登錄，掃碼完之后選擇本地小程序項目選擇添加項目之后如果想要學習一下準備工作要開發微信小程序之前，需要做一些準備工作，首先進入https://mp.weixin.qq.com/debu... showImg(ht...

lemanli 2019-08-21 11:51 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
jQuery 入門詳解（一）

摘要：前面也花了不少時間，專門介紹了基礎這一塊，從最基礎的講起，再到以及特效。對象，文檔對象模型，每一份都可以表示成一棵樹。注意選擇器返回的是對象。名稱用法描述相當于，子類選擇器相當于后代選擇器查找兄弟節點，不包括自己本身。 showImg(https://segmentfault.com/img/remote/1460000013677116?w=1920&h=1080); jQuery ...

only_do 2019-08-22 15:20 評論0 收藏0
jQuery 屬性與樣式

摘要：與中用方法來獲取和設置元素屬性是屬性的縮寫，在操作中會經常用到有個表達式傳入屬性名獲取屬性的值屬性名屬性值設置屬性的值屬性名函數值設置屬性的函數值給指定元素設置多個屬性值，即屬性名一屬性值一屬性名二屬性值二刪除方法為匹配的元素集合中的每個元 .attr()與.removeAttr() jQuery中用attr()方法來獲取和設置元素屬性,attr是attribute（屬性）的縮寫，在j...

yibinnn 2019-08-21 11:52 評論0 收藏0