JavaScript的appendChild、insertBefore和insertAfter
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 常用到JavaScript的appendChild、insertBefore和insertAfter这几个函数，所以在这里作为学习笔记做总结...
|
1、appendChild
添加一个节点到指定的节点的子节点数组中
用法：target.appendChild(newChild)
newChild作为target的子节点插入最后的一子节点之后
来看个这个简单的实例：在id为box-con 的末尾添加一个子节点div
| 代码如下 |
复制代码 |
|
<div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div>
<div id="box-one">
<p class="con2" id="p1">1</p>
<p class="con2">2</p>
<p class="con2">3</p>
</div>
代码
|
| 代码如下 |
复制代码 |
|
window.onload =function () {var btn = document.getElementById("creatbtn");btn.onclick =function() {insertEle();}}function insertEle() { var oTest = document.getElementById("box-one");var newNode = document.createElement("div");newNode.innerHTML =" This is a newcon ";//oTest.appendChild(newNode);oTeset.insertBefore(newNode,null); // 这两种方法均可实现}
|
这个insertBefore 的第一个参数 和appendChild的一样，都是那个新的节点变量，而insert第二个参数不仅可以为null 。也可以这样写呢
| 代码如下 |
复制代码 |
|
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");
var reforeNode = document.getElementById("p1");
newNode.innerHTML =" This is a newcon ";
oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的 前面，
也就是说 插入id为P1节点元素的后面。
}
|
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。
2、insertBefore
在现有的子节点前插入一个新的子节点
用法：target.insertBefore(newChild,existingChild)
newChild作为target的子节点插入到existingChild节点之前
existingChild为可选项参数，当为null时其效果与appendChild一样
DEMO1:
| 代码如下 |
复制代码 |
|
<SCRIPT LANGUAGE="JavaScript">
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("蜗客css");
a.appendChild(b);
document.body.appendChild(a); //默认添加在文档的最后。
//如果我们想指定位置，那么得使用insertBefore()
}
</SCRIPT>
|
输出结果： 蜗客css
| 代码如下 |
复制代码 |
|
DEMO2:
html：
<div id="b">测试一</div>
<div>测试二</div>
<SCRIPT LANGUAGE="JavaScript">
window.onload=function(){
var a =document.createElement("span");
var b =document.createTextNode("蜗客css");
a.appendChild(b);
var mubiao = document.getElementById("b");
mubiao.parentNode.insertBefore(a,mubiao);
//插入到div b 前面。
// 输出结果：蜗客css 测试一 测试二
/*
parentElement.insertBefore( newElement , targetElement );
|
从上面语法可以看出， 父元素， 新元素，目标元素 是 insertBefore使用的3要素。
其实我们可以不管 父元素， 因为 父元素我们 可以用 目标元素.parentNode 得到。
那么insertBefore就很好用了。只要给2个参数 ： 新元素 和目标元素。
那么有没有 insertAfter()方法呢？答案看下个例子。
*/
}
</SCRIPT>
3、insertAfter
在指定节点后添加一个同级的新节点。
用法：insertAfter(newEle, targetEle)
newEle是要新增的节点对象
targetEle是作为insertAfter的目标对象，newEle就是新增到targetEle的后面
我们知道JavaScript没有insertAfter函数，因此需要自定义insertAfter函数：
| 代码如下 |
复制代码 |
|
function insertAfter(newEl, targetEl){
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl){
parentEl.appendChild(newEl);
}else{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}
|
完整实例
| 代码如下 |
复制代码 |
|
<html>
<head>
<title>appendChild、insertBefore和insertAfter函数</title>
</head>
<body>
<div id="target" style="width:400px;border:2px dashed #666;min_height:300px;_height:300px;">
<div id="subnode" style="border:1px dashed #ee3333;height:100px;margin:3px;text-alien:center">
<b style="font-size:24px;font-weight:bold">subnode</b>
</div>
</div>
<script language="javascript">
function insertAfter(newEl, targetEl){
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl){
parentEl.appendChild(newEl);
}else{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}
var target = document.getElementById("target");
var subnode = document.getElementById("subnode");
//appendChild
var newElement = document.createElement("div");
newElement.id = "newnode";
newElement.style.cssText = "border:1px dashed #3333ee;height:100px;margin:3px;text-alien:center";
newElement.innerHTML = "<b style="font-size:24px;font-weight:bold">appendChild</b>";
target.appendChild(newElement);
//insertBefore
var beforeElement = document.createElement("div");
beforeElement.id = "beforenode";
beforeElement.style.cssText = "border:1px dashed #3333ee;height:100px;margin:3px;text-alien:center";
beforeElement.innerHTML = "<b style="font-size:24px;font-weight:bold">insertBefore</b>";
target.insertBefore(beforeElement,subnode);
//insertAfter
var afterElement = document.createElement("div");
afterElement.id = "insertAfter";
afterElement.style.cssText = "border:2px dashed #666;height:100px;width:400px;margin-top:3px;text-alien:center";
afterElement.innerHTML = "<b style="font-size:24px;font-weight:bold">insertAfter</b>";
insertAfter(afterElement,target);
</script>
</body>
</html>
|
|
