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方法把新元素插入到目标元素的下一个兄弟元素之前。