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

起首 从界说来懂得 这两个办法：

appendChild() 办法：可向节点的子节点列表的末端添加新的子节点。语法：appendChild(newchild)

insertBefore() 办法：可在已有的子节点前插进一个新的子节点。语法 ：insertBefore(newchild,refchild)

雷同的地方：插进子节点

分歧的地方：实现道理办法分歧。

appendChild办法是在父级节点中的子节点的末端添加新的节点（相对父级节点 来讲）。

insertBefore 办法 是在已有的节点前添加新的节点（相对子节点来讲的）。

来看个这个简朴的实例：在id为box-con 的末端添加一个子节点div


复制代码 代码以下:


1


2


3


复制代码 代码以下:


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()办法插进节点，是可以在子节点列表的随意率性地位。


呵呵呵。。。有些办法不但是感化于界说的那些特征，只要 相符语法，联合一些属性总会成心想不到的收成。

原文链接：http://daima2.banzhu.com/article/daima2-8-2934799.html