首先 从定义来理解 这两个方法:

appendChild() 方法:可向节点的子节点列表的末尾添加新的子节点。语法:appendChild(newchild)

insertBefore() 方法:可在已有的子节点前插入一个新的子节点。语法 :insertBefore(newchild,refchild)

相同之处:插入子节点

不同之处:实现原理方法不同。

     appendChild方法是在父级节点中的子节点的末尾添加新的节点(相对于父级节点 来说)。

       insertBefore 方法 是在已有的节点前添加新的节点(相对于子节点来说的)。

来看个这个简单的实例:在id为box-con 的末尾添加一个子节点div

  1. <div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div>
  2. <div id="box-one">
  3. <p class="con2" id="p1"></p>
  4. <p class="con2"></p>
  5. <p class="con2"></p>
  6. </div>
  1. window.onload =function () {
  2. var btn = document.getElementById("creatbtn");
  3.  
  4. btn.onclick =function() {
  5. insertEle();
  6. }
  7. }
  8. function insertEle() {
  9. var oTest = document.getElementById("box-one");
  10. var newNode = document.createElement("div");
  11.  
  12. newNode.innerHTML =" This is a newcon ";
  13. //oTest.appendChild(newNode);
  14. oTeset.insertBefore(newNode,null); // 这两种方法均可实现
  15.  
  16. }

这个insertBefore 的第一个参数 和appendChild的一样,都是那个新的节点变量,而insert第二个参数不仅可以为null 。也可以这样写呢

  1. function insertEle() {
  2. var oTest = document.getElementById("box-one");
  3. var newNode = document.createElement("div");
  4. var reforeNode = document.getElementById("p1");
  5.  
  6. newNode.innerHTML =" This is a newcon ";
  7. oTest.insertBefore(newNode,reforeNode); //新建的元素节点插入到 id为p1的元素前面
  8.  
  9. }

或者

  1. function insertEle() {
  2. var oTest = document.getElementById("box-one");
  3. var newNode = document.createElement("div");
  4. var reforeNode = document.getElementById("p1");
  5.  
  6. newNode.innerHTML =" This is a newcon ";
  7. oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素节点插入到 id为p1后面节点元素的 前面,
  8.                               也就是说 插入idP1节点元素的后面。
  9.  
  10. }

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

reforeNode.nextSibling :取得的是reforeNode对象的紧跟着的下一个节点。

previousSibling - 取得某节点的上一个同级节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。

JS(JavaScript)插入节点的方法appendChild与insertBefore的更多相关文章

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

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

  2. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  3. js:插入节点appendChild insertBefore使用方法

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

  4. JavaScript插入节点小结

    JS原生API插入节点的方式大致有innerHTML.outerHTML.appendChild.insertBefore.insertAdjacentHTML.applyElement这6种. 这里 ...

  5. JS常用操作节点的方法

    js常见的创建dom节点的方法有 createElement() 创建一个元素节点 => 接收参数为string类型的nodename createTextNode() 创建一个文本节点 =&g ...

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

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

  7. JS添加父节点的方法。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JavaScript插入节点

    1. document.write("<p>This is inserted.</p>"); 该方法必须加在HTML文档内,违背了结构行为分离原则,不推荐. ...

  9. jQuery插入节点的方法

    注:摘自<锋利的jQuery(第二版)> append() 向每个匹配的元素内部追加内容:  HTML代码:<p>我想说:</p>jQuery代码:$(" ...

随机推荐

  1. Linux系统优化实现高并发

    ulimit -SHn 65535内核优化net.ipv4.ip_forward = 1            #开启路由功能net.ipv4.conf.default.rp_filter = 1   ...

  2. java开发初识

    jdk目录相关介绍: bin:存放的是java的相关开发工具 db:顾名思义jre附带的轻量级数据库 include:存放的是调用系统资源的接口文件 jre:java的运行环境 lib:核心的类库 s ...

  3. virtual memory exhausted: Cannot allocate memory 解决方法

    在阿里云买了个云服务器,内存1G.编译kudu时出现下面的错误: virtual memory exhausted: Cannot allocate memory 问题原因:由于物理内存本身很小,且阿 ...

  4. Alpha 冲刺报告(3/10)

    Alpha 冲刺报告 队名:洛基小队 峻雄(组长) 已完成:开始编写角色的移动脚本 明日计划:继续学习并进行脚本编写 剩余任务:物品背包交互代码 困难:如何把各个模块的脚本整合起来 --------- ...

  5. 跟我一起阅读Java源代码之HashMap(二)

    上一节中实现的SimpleHashMap,没有解决冲突的问题,这一节我们继续深入 由于table的大小是有限的,而key的集合范围是无限大的,所以寄希望于hashcode散落,肯定会出现多个key散落 ...

  6. 查看oracle数据库版本

    1. 登录sysdba用户 sqlplus / as sysdba 2. 方法一:v$version SQL> select * from v$version; 3.  方法二:product_ ...

  7. BZOJ3667:Rabin-Miller算法(Pollard-Rho)

    Description Input 第一行:CAS,代表数据组数(不大于350),以下CAS行,每行一个数字,保证在64位长整形范围内,并且没有负数.你需要对于每个数字:第一,检验是否是质数,是质数就 ...

  8. BZOJ4180:字符串计数(SAM,二分,矩阵乘法)

    Description SD有一名神犇叫做Oxer,他觉得字符串的题目都太水了,于是便出了一道题来虐蒟蒻yts1999. 他给出了一个字符串T,字符串T中有且仅有4种字符 'A', 'B', 'C', ...

  9. 【转】[置顶] 在Android中显示GIF动画

    gif图动画在Android中还是比较常用的,比如像新浪微博中,有很多gif图片,而且展示非常好,所以我也想弄一个.经过我多方的搜索资料和整理,终于弄出来了,其实github上有很多开源的gif的展示 ...

  10. React-Native 之 index.android.bundle

    问题: index.android.bundle  这个bug 我相信很少同学会遇到,然而就是这个问题,困扰了我跟我的同事多天, 各种方法处理:  进入 android 目录  ./gradlew c ...