javascript的insertBefore、insertAfter和appendChild简单介绍

target.insertBefore(newChild,existingChild)
参数说明:
1.target:被添加节点和现有节点的父节点。
2.newChild:将要被插入的节点。
3.existingChild:现有的节点，新节点将会被插入到它的前面，此参数值可以为null。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>insertBefore()函数-蚂蚁部落</title> 
<script type="text/javascript"> 
window.onload=function()
{
  var obox=document.getElementById("box");
  var lis=document.getElementsByTagName("li");
  var newLi=document.createElement("li");
  newLi.innerHTML="新蚂蚁部落";
  obox.insertBefore(newLi,lis[1]);
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
</ul>
</body> 
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>insertBefore()函数-蚂蚁部落</title> 
<script type="text/javascript"> 
window.onload=function()
{
  var obox=document.getElementById("box");
  var lis=document.getElementsByTagName("li");
  var newLi=document.createElement("li");
  newLi.innerHTML="新蚂蚁部落";
  obox.insertBefore(newLi,null);
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
</ul>
</body> 
</html>

二.appendChild()函数:
此函数可以在父节点的内部的尾部追加一个新的节点。

target.appendChild(newChild)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>insertBefore()函数-蚂蚁部落</title> 
<script type="text/javascript"> 
window.onload=function()
{
  var obox=document.getElementById("box");
  var lis=document.getElementsByTagName("li");
  var newLi=document.createElement("li");
  newLi.innerHTML="新蚂蚁部落";
  obox.appendChild(newLi);
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
</ul>
</body> 
</html>

三.insertAfter函数:

   虽然DOM中没有提供insertAfter方法，但是我们可以通过insertBefore方法去完成这个方法的实现：

function insertAfter(newElement, targetElement) {

         var parent = targetElement.parentNode;

         if(parent.lastChild == targetElement) {

               parent.appendChild(newElement);

        }

         else {

              parent.insertBefore(newElement, targetElement.nextSibling);

        }

}

下面，请看看这个函数是如何一步一步地完成工作的

（1）首先，这个函数有两个参数:一个是将被插入的新元素，另一个是目标元素。这两个参数通过变量newElement和targetElement被传递到这个函数；

（2）把目标元素的parentNode属性值保存到变量parent里；

（3）接下来，检查目标元素是不是parent的最后一个子元素；

（4）如果是，就用appendChild方法把新元素追加到parent元素上,这样新元素就恰好被插入目标元素之后;

（5）如果不是，就把新元素插入到目标元素和目标元素的下一个兄弟元素之间，目标元素的下一个兄弟元素即目标元素的nextSibling属性，用insertBefore方法把新元素插入到目标元素的下一个兄弟元素之前。