javascript的insertBefore、insertAfter和appendChild简单介绍
2024-10-19 00:22:58
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方法把新元素插入到目标元素的下一个兄弟元素之前。
最新文章
- Java笔记:修饰符
- Ajax与Comet
- Easyui datebox 限制时间选择范围
- linux arch目录下处理器体系架构介绍
- Code Contracts for .NET
- dojo.publish 和 dojo.subscribe
- 在windows下配置pthread
- Yii 的AR单行数据自动缓存机制
- Asteroids
- codeforces 6A. Triangle
- 在iOS应用程序中使用Frida绕过越狱检测
- 【BZOJ2959】长跑(Link-Cut Tree,并查集)
- Matlab图像处理常用基本函数
- 当Django中Debug=False,静态文件处理方式。
- adb+monkey压力测试入门
- Manjaro更新出现冲突
- Codeforces 1097G Vladislav and a Great Legend [树形DP,斯特林数]
- VS2015离线安装NuGet Package
- angular2组件通讯的几种方式
- Android-Anim-Playground