上一节我们学会了怎么创建元素，如果仅仅是创建一个元素而没有插入到HTML文档中，这样的操作是没有任何意义的。这一节我们来学一下怎么把创建好的元素插入到已经存在的元素中。在JavaScript中，插入元素有以下2种方法。
一、appendChild()
在JavaScript中，我们可以使用appendChild()把一个新元素插入到父元素的内部子元素的 末尾 。
语法：
A.appendChild(B);
说明：
A表示父元素，B表示动态创建好的新元素。后面章节中，如果没有特殊说明，A都表示父元素，B都表示子元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
//为按钮添加点击事件
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
var oTxt = document.getElementById("txt");
//将文本框的内容转换为“文本节点”
var textNode = document.createTextNode(oTxt.value);
//动态创建一个li元素
var oLi = document.createElement("li");
//将文本节点插入li元素中去
oLi.appendChild(textNode);
//将li元素插入ul元素中去
oUl.appendChild(oLi);
};
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="txt" type="text"/><input id="btn" type="button" value="插入" />
</body>
</html>
默认情况下，预览效果如下图所示。
我们在文本框中输入“jQuery”，然后点击【插入】按钮后，此时预览效果如下图所示。
分析：
oBtn.onclick = function()
{
……
};
上面表示为一个元素添加点击事件，所谓“点击事件”，指的是当我们点击按钮后会做些什么。这个跟前面讲到的window.onload是非常相似的，只不过window.onload表示页面加载完成后会做些什么，而oBtn.onclick表示点击按钮后会做些什么。当然，这种写法我们在后面“11.3 鼠标事件”这一节会详细介绍。
二、insertBefore()
在JavaScript中，我们可以使用insertBefore()方法将一个新元素插入到父元素中的某一个子元素“之前”。
语法：
A.insertBefore(B,ref);
说明：
A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新子元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
var oUl = document.getElementById("list");
var oTxt = document.getElementById("txt");
//将文本框的内容转换为“文本节点”
var textNode = document.createTextNode(oTxt.value);
//动态创建一个li元素
var oLi = document.createElement("li");
//将文本节点插入li元素中
oLi.appendChild(textNode);
//将li元素插入到ul的第1个子元素前面
oUl.insertBefore(oLi, oUl.firstElementChild);
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<input id="txt" type="text"/><input id="btn" type="button" value="插入" />
</body>
</html>
默认情况下，预览效果如下图所示。
我们在文本框中输入“jQuery”，然后点击【插入】按钮后，浏览器预览效果如下图所示。
分析：
oUl.firstElementChild表示获取ul元素下的第一个子元素。大家仔细比较一下这两个例子，就能看出appendChild()和insertBefore()这两种插入方法的不同了。实际上，这两种方法其实刚好是互补关系（如下图所示）：appendChild()是在父元素最后一个子元素后面插入；而insertBefore()是在父元素任意一个子元素之前插入。这样使得我们可以将新元素插入任何地方。
此外需要注意一点，appendChild()和insertBefore()这两种插入元素的方法都需要获取父元素才可以操作。
