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>
时间： 2024-07-28 19:35:50

JavaScript的appendChild、insertBefore和insertAfter的相关文章

javascript使用appendChild追加节点实例

 这篇文章主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下     本文实例讲述了javascript使用appendChild追加节点的方法.分享给大家供大家参考.具体分析如下: DOM树节点的增加,实例代码如下: 代码如下: <html> <head> <script type="text/javascript"> function t(){

javascript使用appendChild追加节点实例_javascript技巧

本文实例讲述了javascript使用appendChild追加节点的方法.分享给大家供大家参考.具体分析如下: DOM树节点的增加,实例代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodep = document.createElement('p');//创建p节点  var art = document.createTextNo

JavaScript之appendChild、insertBefore和insertAfter使用说明_javascript技巧

appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法 target.appen

初学js插入节点appendChild insertBefore使用方法_javascript技巧

首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在已有的子节点前插入一个新的子节点.语法 :insertBefore(newchild,refchild) 相同之处:插入子节点 不同之处:实现原理方法不同. appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说). insertBefore 方法 是在已有的节点前

javascript insertAfter()定义与用法示例_javascript技巧

本文实例讲述了javascript insertAfter()定义与用法.分享给大家供大家参考,具体如下: HTML部分: <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript部分: window.onload=function(){ var a =document.createElement("span"); var b =document.createTe

jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍_jquery

insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script&g

javascript appendChild,innerHTML,join性能比较代码_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>appendChi

重读《JavaScript DOM编程艺术》（第一版）

今天来了雅兴去图书馆看书.把<JavaScript DOM编程艺术>温习了一遍,平时写js的机会不是特别多,很多知识都有些模糊了. 伴随着身边键盘卡啦卡啦的声音,一位手速不是一般的快的程序猿.我也快速的回顾了下~ Chapter 1     JavaScript简史 1.Netscape(网景)/Sun公司 2.JavaScript 1.0 - Netscspe Navigator 2 3.VBScript - IE 3 4.ECMA标准化 - 浏览器之争 5.什么是DOM? W3C 文档对象

JavaScript网站设计实践（二）实现导航栏当前所选页面的菜单项高亮显示

原文:JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示 一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include进来.这样,当要对导航栏进行修改时,只需要修改一个文件,而不用修改所有相关的页面文件.不过,我这里没有这样做,没有抽取出来. 二.实现当前页面的标识+不同页面的head头部背景图片的改变 现在在(一)实现的基础之上,