常用函数：
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);
}
