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

来看个这个简单的实例:在id为box-one 的末尾添加一个子节点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();
5   }
}
function insertEle() {
  var oTest = document.getElementById("box-one");
  var newNode = document.createElement("div"); // createElement 是在对象中创建一个对象
  newNode.innerHTML = " This is a newcon ";
  //oTest.appendChild(newNode);
  oTeset.insertBefore(newNode,null); // 这两种方法均可实现 或者oTeset.insertBefore(newNode,oTeset.childNodes[0])
    
}

这个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); // 新建的元素节点插入到 id为p1的元素前面
//或者oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的前面,也就是说 插入id为P1节点元素的后面。 
7}

nextSibling :某个元素之后紧跟的元素(处于同一树层级中)。

reforeNode.nextSibling :取得的是reforeNode对象的紧跟着的下一个节点。 
previousSibling - 取得某节点的上一个同级节点。

//appendChild无法设置想要插入的明确位置
//oTest.appendChild(oP2); //insertBefore则可以设置
//oTest.insertBefore(oP2,null);
//oTest.insertBefore(oP2,oP1);
//oTest.insertBefore(oP2,oP1.nextSibling);
//oTest.insertBefore(oP2,oP3.previousSibling);
//oTest.insertBefore(oP2,oTest.childNodes[0]);

好了那么有insertBefore的应该也有insertAfter吧? 
好那我们来用Aptana编写一个例子吧,但Aptana的智能提示告诉我其实没有insertAfter这个方法 
那么就自己定义一个罗
insertAfter定义

 function insertAfter(newEl, targetEl) {
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl) {
parentEl.appendChild(newEl);
}else {
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}

总结: 
1、appendChild和insertBefore是做对节点的方法来使用的,而insertAfter只是自定义的一个函数 
2、insertBefore相对于appendChild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置。 
3、使用appendChild和insertBefore来插入新的节点前提是,其兄弟节点必须有共同的父节点

如果只从DOM操作的性能上分析,appendChild和insertBefore这两个方法本身是没有太大差异的。但是insertBefore本身具有appendChild无法比拟的功能,它对插入元素的位置是可以选择的。因此它对页面可能造成的影响也更大,渲染的开销也可能更大。

最后顺便说一下,在IE6上,文档加载完毕之前使用appendChild会出错,而使用insertBefore就不会出错。

js:插入节点appendChild insertBefore使用方法的更多相关文章

  1. js插入节点appendChild和insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

  2. 插入节点appendChild()

    http://www.imooc.com/code/1698 插入节点appendChild() 在指定节点的最后一个子节点列表之后添加一个新的子节点. 语法: appendChild(newnode ...

  3. js获取节点和编辑的方法

    创建新节点 1.创建一个DOM片段createDocumentFragment() 例如: var d=document.createDocumentFragment(); d.appendChild ...

  4. 【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

    这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). *注意一下,在调用parentNode 方法的时候 调用的对象必须是用ID 或 ...

  5. JQ 添加节点和插入节点的方法总结

    转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345 添加节点的jQuery方法: append().prepend().ap ...

  6. js获取节点的DOM操作

    一直感觉DOM节点什么的乱七八糟的不能理解,可能博客也没办法写清楚,只能把知道的一些信息大致写下来慢慢再补充了. HTML DOM类型 Node类型 Javascript中的所有节点类型都继承自Nod ...

  7. js element类型的属性和方法整理

    Element类型 除了Document类型,我们Web编程中最常用的类型就是Element类型啦.Element 类型用于表现XML或HTML元素,提供了对元素标签名,子节点,特性的访问 特征 no ...

  8. JS中插入节点的方法appendChild和insertBefore的应用

    1.appendChild() 方法:可以向节点的子节点列表的末尾添加新的子节点.比如:appendChild(newchild)括号里可以是创建的标签var newchild = document. ...

  9. JS(JavaScript)插入节点的方法appendChild与insertBefore

    首先 从定义来理解 这两个方法: appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点.语法:appendChild(newchild) insertBefore() 方法:可在 ...

随机推荐

  1. ExtJs动态生成treepanel的Json格式

    在节点中加上"checked"属性,会自动生成checkbox. 获取选中节点 var nodeArray = ""; var nodesObj = mytre ...

  2. SignalR入门之从外部访问持久性连接或Hub

    有的时候,需要从外部访问持久性连接或Hub服务. 比如,假设A和B两个客户端正在聊天,那么系统或第三方在不参与聊天的情况需要为他们发送系统消息,那么此时,就需要独立来访问持久性连接或Hub服务. 之前 ...

  3. Service随系统启动运行

    Android系统启动时,会发出android.intent.action.BOOT_COMPLETED广播,定义一个类继承自BroadcastReceiver,监听该广播,并在收到该广播时启动Ser ...

  4. Yii2初谈

    Yii2发布有两个月时间了,一直没有去仔细关注过. 今天在回顾PSR标准时,稍稍扫了一眼Yii2.它的命名风格还是一如既往的与Zend那种既首字母大写又还要下划线连接的很二的命名风格格格不入.其实我看 ...

  5. Spring常用注解汇总

    本文汇总了Spring的常用注解,以方便大家查询和使用,具体如下: 使用注解之前要开启自动扫描功能 其中base-package为需要扫描的包(含子包). <context:component- ...

  6. HTML标签小结

    HTML:超文本标记语言 超:超链接       超文本:超出文本(可加入图片,文字,音频视频播放器)  标记:标签 HTML文档 以<html...>开始 , 以</html> ...

  7. Effective Java

    Effective Java 创建和销毁对象---考虑用静态工厂方法代替构造器 构造器是创建一个对象实例最基本也最通用的方法,大部分开发者在使用某个class的时候,首先需要考虑的就是如何构造和初始化 ...

  8. First day on cnblogs,破壳日~~

    突然很想找个地方写一点文章,又想到了这个老账号:没有因长期静默被删号实在是很感动...好吧,就这样纪念一下.第一天. I suddenly wanna write something and reca ...

  9. ahjesus可供C#使用的ip地理位置查询插件

    http://dev.maxmind.com/geoip/geoip2/downloadable/#MaxMind_APIs 详情请阅读此链接及相关内容

  10. Guava学习笔记:Range

    在Guava中新增了一个新的类型Range,从名字就可以了解到,这个是和区间有关的数据结构.从Google官方文档可以得到定义:Range定义了连续跨度的范围边界,这个连续跨度是一个可以比较的类型(C ...