初学js插入节点appendChild insertBefore使用方法
更新时间：2011年07月04日 23:24:21 作者：
由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点但是两种情况结合起来发现insertBefore()方法插入节点，是可以在子节点列表的任意位置。
首先 从定义来理解 这两个方法：
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">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); // 新建的元素节点插入到 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()方法插入节点，是可以在子节点列表的任意位置。
呵呵呵。。。有些方法不只是作用于定义的那些特性，只要 符合语法，结合一些属性总会有意想不到的收获。
作为初学者，我懂的不多，或许我的理解还很浅薄，有些可能理解错了，希望看到的能够给我提点下，我不求别的，我只希望在这里记录点点滴滴和吸取大家的建议 来促进我的成长。。。
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">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); // 新建的元素节点插入到 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+CSS3实现的类似于苹果iwatch计时器特效，很实用的代码，推荐给大家，有需要的小伙伴可以参考下。2015-08-08
这篇文章主要介绍了JS const关键字生成常量有哪些特点，下面通过代码演示const关键字声明的常量的块级作用域效果，需要的朋友可以参考下2023-05-05
这篇文章主要为大家解析了全屏滚动插件fullPage.js使用实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了js利用FileReader读取本地文件或者blob方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-12-12
这篇文章主要介绍了JS实现可用滑块滑动的缓动图代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09
这篇文章主要为大家详细介绍了js实现飞机大战小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要为大家详细介绍了用JS实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
这篇文章主要为大家详细介绍了javascript实现扫雷简易版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要介绍了JS中的Map对象用法及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
这篇文章主要为大家详细介绍了基于JavaScript实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
最新评论