javascript如何在元素中插入新的元素

本章節介紹一下如何在指定元素中插入一個新的元素，方法與多種，再來簡單的介紹一下，希望能夠給初學者帶來一定的幫助。

下面是要插入節點的元素:

[HTML] 純文字檢視 複製程式碼
<div id="box">
  <div id="old">原來的內容</div>
</div>

我們要在box元素中插入一個新的元素。

一.使用appendChild()函式：

語法結構:

[JavaScript] 純文字檢視 複製程式碼
object.appendChild(oNewNode)

引數說明:

1.object:要被新增子節點的節點物件。

2.newchild:要被新增到object子節點物件。

此函式可以將一個節點新增到指定元素的尾部，程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var box=document.getElementById("box");
var newEle=document.createElement("div");
newEle.innerHTML="螞蟻部落";
box.appendChild(newEle);

以上程式碼可以建立一個新的div物件，然後將此物件新增到box元素內部的尾部。

二.使用insertBefore()函式:

語法結構:

[JavaScript] 純文字檢視 複製程式碼
object.insertBefore(oNewNode,oChildNode )

引數說明:

1.object:要被新增子節點的節點物件。

2.oNewNode:要被新增到object子節點物件。

3.可選項。定位插入點， oNewNode被插入到緊貼這個子物件的前面。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
var box=document.getElementById("box");
var newEle=document.createElement("div");
newEle.innerHTML="螞蟻部落";
box.insertBefore(newEle);

以上程式碼仍然是將新的div節點新增到了box的內部的尾部，並沒有放在前面，這是因為如果第二個引數省略的話，那麼它的作用是和appendChild()函式是一樣的，將以上程式碼進行改造如下:

[JavaScript] 純文字檢視 複製程式碼
var box=document.getElementById("box");
var old=document.getElementById("old");
var newEle=document.createElement("div");
newEle.innerHTML="螞蟻部落";
box.insertBefore(newEle,old);

這樣就實現了我們想要的功能，可以將新的div插入到了box元素內部的前面。