JavaScript如何新增刪除元素-js教程-PHP中文網

JavaScript如何新增刪除元素

醉折花枝作酒筹

發布： 2023-01-04 09:35:16

原創

3643 人瀏覽過

JS新增和刪除元素的方法：1、使用“appendChild("元素名稱")」新增元素；2、使用“insertBefore(元素名稱,在哪裡新增元素)”，可在任意位置新增元素；3、使用「removeChild("元素名稱")」刪除元素。

JavaScript如何新增刪除元素

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript如何新增刪除元素

要新增一個元素，首先要先建立一個元素，若要往新新增的元素裡面寫入文本，那就還要建立一個文本節點，再將文本節點的值插入到新新增的元素中。

（1）createElement("元素名稱")：此方法可以建立一個新的元素。例如：createElement("p") ，表示建立了一個p標籤（元素/段落）。

（2）createTextNode("文字內容")：此方法可以建立一個文字節點。例如：createTextNode("我是新的內容")，表示建立了一個值為「我是新的內容」的文字節點。

（3）appendChild("元素名稱")：新增一個新的元素。例如：ul.appendChild("li")，表示在ul裡面增加一個li元素。

（4）removeChild("元素名稱")：刪除一個元素。用法與（3）相反。

下面的範例為ul動態的添加li元素，並且每次都在原有的li前面添加。

<script>
      window.οnlοad=function () {
          var UL=document.getElementsByClassName(&#39;box&#39;)[0];
          var btn=document.getElementsByTagName(&#39;button&#39;);
          var index=1;  //序号计数器
          btn[0].οnclick=function () {    //创建新节点，并添加新元素,新添加的元素总是在最前面
              var li=document.createElement(&#39;li&#39;),  //创建li元素
                  content=&#39;我是第&#39;+index+&#39;个li&#39;;    //li元素的文本节点的内容
              var text=document.createTextNode(content);  //创建li元素的文本节点
              index++;   //每创建一个li计数就+1
              var Li=UL.getElementsByTagName(&#39;li&#39;);    //获取页面中的li集合
              UL.insertBefore(li,Li[0]),li.appendChild(text);  //在页面中第一个li前面添加新的li标签
          }
          btn[1].οnclick=function () {  //删除添加的元素
              var li=document.getElementsByTagName(&#39;li&#39;)[0];
              if(!index%2==0){
                  li.parentNode.removeChild(li);
              }
          }
      }
</script>
</head>
<body>
<button>点击添加新的li元素</button>
<button>点击删除li元素</button>
<ul class="box">
</ul>
</body>

登入後複製

標註：如果你想每一次新加入的li都在原有的li前面，那就要用到 insertBefore() 方法了。

insertBefore()裡面有兩個參數值，第一個參數值為你要新增的元素名稱，第二個參數值為要在哪裡加入的元素的名稱（值可以是null），當為null時，效果就和appendChild()一樣了。

例如上面的例子，我想每一次加入的元素li都在最前面。那麼只需要改動第四步就行了：

var Li=UL.getElementsByTagName("li");
UL.insertBefore(li,Li[0]);li.appendChild(text);

登入後複製

也就是說想要新增一個新元素有兩種方法：①appendChild()，②insertBefore()；刪除一個元素：removeChild()

#推薦學習：javascript影片教學

以上是JavaScript如何新增刪除元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

JavaScript如何新增刪除元素