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 insert?After(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方法把新元素插入到目标元素的下一个兄弟元素之前。
时间： 2024-10-30 12:18:51