上一節我們學會了創建節點，這一節我們來學學如何插入節點。
在JavaScript中，插入節點有2種方法：
下面一一講解一下這2種插入節點的方法。
在JavaScript中，我們可以使用appenChild()方法把新的節點插入到當前節點的“內部”。
語法：
obj.appendChild(new)
說明：
obj表示當前節點，new表示新節點。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //獲取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.appendChild(e);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
列項文本：<input id="txt" type="text"/><br />
<input type="button" value="插入新項" onclick="insert()" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
我們在文本框中輸入列表項文本“jQuery”，然後點擊“插入新項”按鈕，浏覽器預覽效果如下：
在JavaScript中，我們可以使用insertBefore()方法將新的子節點添加到當前節點的“末尾”。
語法：
obj.insertBefore(new,ref)
說明：
obj表示父節點；
new表示新的子節點；
ref指定一個節點，在這個節點前插入新的節點。
舉例：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //獲取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.insertBefore(e,list.firstChild);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
列項文本：<input id="txt" type="text"/><br />
<input type="button" value="插入新項" onclick="insert()"/>
</body>
</html>
在浏覽器預覽效果如下：
分析：
我們在文本框中輸入列表項文本“jQuery”，然後點擊“插入新項”按鈕，浏覽器預覽效果如下：
大家仔細比較一下這兩個例子的不同之處，就能明白appendChild()和insertBefore()這2種插入節點方式的不同了。
這裡注意一點，appendChild()和insertBefore()這2種插入節點方式都需要獲取父節點才能進行操作。