操作DOM的一些有用的综合方法/函数 [二]

* 关于向不同的位置添加元素

1. 向某个元素之前添加元素节点

如下

<div>

         <h1 id="welcome">hi! </h1>

</div>

如果想在h1元素（假设变量名叫nodeH）前且在当前div中添加一个P元素（假设变量名叫nodeP）， 可以直接调用 dom的 insertBefore函数。

var nodeH = document.getElementById("welcome");

var nodeP = document.createElement("p");

var pText = document.createTextNode("any text here");

nodeP.appendChild(pText);

insertBefore(nodeP, nodeH);

---

2. 向某个元素之后添加元素节点

//Dom不提供默认的方法 所以自定义

//获取destEle的父节点， 如果父节点的最后一个节点是当前节点， 则直接在父节点上做appendChild.

//如果不是（即destEle是父节点多个元素节点中的一个，位置不在末尾。此时我们可以在destEle的下一个元素节点前添加这个元素节点）

//保险起见， 检查一下传入参数的nodeType， 需要是元素节点。

function InsertElementAfter(newEle, destEle) {

if (newEle == null) return false;

if (destEle == null) return false;

if (newEle.nodeType != 1) return false;

if (destEle.nodeType != 1) return false;

var parent = destEle.parentNode; //parentNode一定是返回的元素节点 所以不用再检查

if (destEle == parent.lastChild) {

parent.appendChild(newEle);

} else {

parent.insertBefore(newEle, destEle.nextSibling); //由于destEle本身是元素节点， 所以nextSibling也不用担心他是什么节点。直接再同级树层次中添加即可.

}

}