JavaScript如何新增刪除元素
JS新增和刪除元素的方法：1、使用「appendChild("元素名稱")」新增元素；2、使用「insertBefore(元素名稱,在哪新增元素)」，可在任意位置新增元素；3、使用「removeChild("元素名稱")」刪除元素。
本教學操作環境：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('box')[0];
var btn=document.getElementsByTagName('button');
var index=1; //序號計數器
btn[0].οnclick=function () { //建立新節點，並新增新元素,新新增的元素總是在最前面
var li=document.createElement('li'), //建立li元素
content='我是第'+index+'個li'; //li元素的文位元組點的內容
var text=document.createTextNode(content); //建立li元素的文位元組點
index++; //每建立一個li計數就+1
var Li=UL.getElementsByTagName('li'); //獲取頁面中的li集合
UL.insertBefore(li,Li[0]),li.appendChild(text); //在頁面中第一個li前面新增新的li標籤
}
btn[1].οnclick=function () { //刪除新增的元素
var li=document.getElementsByTagName('li')[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如何新增刪除元素的詳細內容，更多請關注TW511.COM其它相關文章！