DOM基础之插入元素
插入元素有两种方法
1 appendChild()
2 insertBefore()
1.在JavaScript中我们可以使用appendChild()方法把一个新元素插入到父元素内部子元素的末尾
语法：A.appendChild(B);
说明：
A代表父元素，B表示动态创建好的新元素，即子元素
实例
```
<!DOCTYPE >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8" />
<script>
window.οnlοad=function()
{
var oBtn=document.getElementById("btn");
//为按钮添加点击事件
oBtn.οnclick=function()
{
var oU1=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元素插入到u1元素中去
oU1.appendChild(oLi);
};
}
</script>
</head>
<body>
<u1 id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</u1>
<input id="txt" type="text" /><input id="btn"
type="button" value="插入" />
</body>
</html>
```分析：
oBtn.οnclick=function()
{
......
};
上面表示为一个元素添加点击事件，所谓的点击事件就是我们点击按钮后会做些什么，这个跟之前讲到的window.onload是非常相似的，只不过window.onload表示页面加载完后会做些什么，而oBtn.click表示点击按钮后会做些什么
2.insertBefore(0
在JavaScript中我们可以使用InsertBefore()方法将一个新元素插入到父元素中的某一个子元素之前
语法：
A.insertBefore(B,ref);
说明：
A表示父元素，B表示新子元素。ref表示指定子元素，在这个元素之前插入新元素。
分析：oU1.firstElementChild表示获取u1元素下的第一个子元素。appendChild()和insertBefore()这两种方法是互补关系，appendChild实在父元素最后一个子元素后面插入，而insertBefore()是在父元素任意一个子元素之前插入，这样可以使我们将新元素插入到·任何地方
