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影片教學
以上是JavaScript如何新增刪除元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
