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

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

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

相同之处:插入子节点

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

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

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

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

<div class="btns"><input type="button" value="插入元素" id="creatbtn"/></div>
<div id="box-one">
<p class="con2" id="p1"></p>
<p class="con2"></p>
<p class="con2"></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); //新建的元素节点插入到 id为p1的元素前面 }

或者

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节点元素的后面。 }

这里想说的是 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. AC自动机, 字符串匹配算法

    package utils import java.util.HashMapimport java.util.LinkedListimport util.control.Breaks._import ...

  2. (转)如何安装 easy installer+pip

    http://blog.csdn.net/wuxiaobingandbob/article/details/42457807

  3. Hadoop HBase概念学习系列之HFile(二十)

    HFile文件是不定长的. HFile里才是想要的真正数据,实际存储的位置,是在HDFS上.

  4. 查找数据库表中重复的 Image 类型值

    直接上代码: SELECT * FROM [dbo].[V_Courseware] ))) IN ())) FROM [dbo].[V_Courseware] ))) ); 替换以上代码中相应对象即可 ...

  5. XtraEditors一、总体介绍

    一.所有编辑器的公共功能 全部都可以绑定数据: 全部都可以独立使用或用于由 Developer Express 提供的容器控件 (XtraGrid.XtraVerticalGrid.XtraTreeL ...

  6. 微软YY公开课[《微软中国云计算Azure平台体验与新企业架构设计》 周六晚9点

    YY频道是 52545291//@_勤_: YY账号真的是一次一账号啊! 全然记不得之前注冊的//@老徐FrankXuLei: 最火爆的微软免费公开课.第一次顶峰126人.第二次96人.第三次我们又来 ...

  7. [Java123]软件自动生成接口文档

    需求场景:进入新项目,开始老本行读源码. 急需要快速了解项目的各个接口架构. https://www.jianshu.com/p/4c31e9920537

  8. 解决nodejs运行程序卡死之后,程序后台运行的问题

    查看node进程 ps aux | grep node 查出的结果如下 root 1660 0.0 1.5 885024 15892 tty1 Sl+ Mar11 0:00 node server.j ...

  9. 关于Python常用框架学习

    我对Python不是特别熟悉,我仅仅只知道它在Web自动化领域挺牛逼的,还有爬虫.当然了,现在的人工智能和机器学习用到它也很多. 记得六月还是七月份的时候,那个时候,突然心血来潮就开始学起了Pytho ...

  10. atom / vscode (配置c++环境流程)

    最初主要是被这个炫酷的插件吸引了,这么打代码太特么有激情了 还有跳舞的初音姐姐哦!! 现附上一篇文章,这篇文章步骤讲得很详细了 http://blog.csdn.net/qq_36731677/art ...