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

2019-11-20 23:46:28

字体：大中小

来源：转载

供稿：网友

首先从定义来理解这两个方法：
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 新节点的创建删除的步骤

下一篇：javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)