常用函數:
createElement 建立元素(不會立即顯示,必須綁定到某個父節點上)
createTextNode 建立文本節點(不會立即顯示,必須綁定到某個父節點上)
insertBefore 將一個元素插入到父節點下的某個元素之前(插入後瀏覽器即時渲染)
appendChild 將一個元素添加到父節點下的最後位置(插入後瀏覽器即時渲染)
removeChild 從父節點中刪除一個節點(刪除後瀏覽器即時渲染)
以下為《精通JavaScript》中提供的函數
function checkElem(elem) {
//如果只提供字串,則把它轉化為文檔節點
return elem && elem.constructor == String ? document.createTextNode(elem) : elem;
};
function append(parent, elem) {
parent.appendChild(checkElem(elem));
};
function before(parent, before, elem) {
//如果只傳入了兩個參數,那麼需要擷取第一個參數的父節點以使用inserBefore函數
if(elem == null) {
elem = before;
before = parent;
parent = before.parentNode;
}
parent.insertBefore(checkElem(elem), before);
};
elem && elem.constructor == String …… 這裡的運算順序是 elem && ( elem.constructor == String ) ……
另外,直接從innerHTML插入具有更高的效率,但是XML不支援innerHTML 屬性。
如果要傳入的elem參數是一個DOM節點和HTML字串的混合數組,改進函數如下:
function checkElem(a) {
var r = [];
//如果參數不是數組,強行轉換
if (a.constructor != Array)
a = [a];
for (var i = 0; i < a.length; i++) {
if (a[i].constructor == String) {
//用一個臨時變數存放HTML
var div = document.createElement("div");
//注入HTML,轉換成DOM結構
div.innerHTML = a[i];
//提取DOM結構到臨時div中
for (var j = 0; j < div.childNodes.length; j++)
r[r.length] = div.childNodes[j];
}
else if (a[i].length) {
// 假定是DOM節點數組
for (var j = 0; j < a[i].length; j++)
r[r.length] = a[i][j];
}
else {
//否則假定是DOM節點
r[r.length] = a[i];
}
}
return r;
};
function before(parent, before, elem) {
//檢查是否提供parent節點參數
if (elem == null) {
elem = before;
before = parent;
parent = before.parent;
}
//擷取元素的新數組
var elems = checkElem(elem);
//向後遍曆數組,因為我們向前插入元素
for (var i = elems.length - 1; i >= 0; i--) {
parent.insertBefore(elems[i], before);
}
};
function append(parent, elem) {
var elems = checkElem(elem);
for (var i = 0; i < elems.length; i++) {
parent.appendChild(elems[i]);
}
};
最後再補充兩個函數:
function remove(elem) {
if (elem)
elem.parentNode.removeChild(elem);
}
function empty(elem) {
while(elem.firstChild)
remove(elem.firstChild);
}