* 關(guān)于向不同的位置添加元素
1. 向某個(gè)元素之前添加元素節(jié)點(diǎn)
如下
<div>
? ? ? ? ?<h1 id="welcome">hi! </h1>
</div>
如果想在h1元素(假設(shè)變量名叫nodeH)前且在當(dāng)前div中添加一個(gè)P元素(假設(shè)變量名叫nodeP), 可以直接調(diào)用 dom的 insertBefore函數(shù)钮孵。
var nodeH = document.getElementById("welcome");
var nodeP = document.createElement("p");
var pText = document.createTextNode("any text here");
nodeP.appendChild(pText);
insertBefore(nodeP, nodeH);
2. 向某個(gè)元素之后添加元素節(jié)點(diǎn)
//Dom不提供默認(rèn)的方法 所以自定義
//獲取destEle的父節(jié)點(diǎn)声登, 如果父節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)是當(dāng)前節(jié)點(diǎn), 則直接在父節(jié)點(diǎn)上做appendChild.
//如果不是(即destEle是父節(jié)點(diǎn)多個(gè)元素節(jié)點(diǎn)中的一個(gè),位置不在末尾。此時(shí)我們可以在destEle的下一個(gè)元素節(jié)點(diǎn)前添加這個(gè)元素節(jié)點(diǎn))
//保險(xiǎn)起見, 檢查一下傳入?yún)?shù)的nodeType蹈垢, 需要是元素節(jié)點(diǎn)。
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一定是返回的元素節(jié)點(diǎn) 所以不用再檢查
if (destEle == parent.lastChild) {
parent.appendChild(newEle);
} else {
parent.insertBefore(newEle, destEle.nextSibling); //由于destEle本身是元素節(jié)點(diǎn)袖裕, 所以nextSibling也不用擔(dān)心他是什么節(jié)點(diǎn)曹抬。直接再同級(jí)樹層次中添加即可.
}
}