使用DOM创建节点
createElement函数可以用来创建新元素，它以标记名称为参数，并返回该元素的实际DOM引用，没有默认的属性和样式。同时创建的元素必须使用正确的XML命名空间。例如：

function create( elem ) {
    return document.createElementNS ?
        document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :
        document.createElement( elem );
}

例如，使用这个函数创建一个简单的<div>元素，并添加一些属性：

var div = create("div");
div.className = "items";
div.id = "all";

插入元素
第一个函数是 insertBefore，可以在一个子元素前插入一个元素，函数的用法类似于：
parentOfBeforeNode.insertBefore( nodeToInsert, beforeNode);
即：insert第一个元素，before第二个。

第二个函数是 appendChild，用来在父节点中追加子节点，用法：
parentElement.appendChild(nodeToInsert);

在一个元素之前插入元素的函数

function before( parent, before, elem ) {
    // 检查是否传入 parent 参数
    if ( elem == null ) {
        elem = before;
        before = parent;
        parent  = before.parentNode;
    }
    parent.insertBefore( checkElem( elem ), before );
}

为一个元素追加一个子元素的函数

function append( parent, elem ) {
    parent.appendChild( checkElem( elem ) );
}

before 和 append 的辅助函数

function checkElem( elem ) {
    // 如果参数是字符串，则把它转化成文本节点
    return elem && elem.constructor == String ?
        document.createTextNode( elem ) : elem;
}

使用 before 和 append 函数

// 创建一个新的  <li> 元素
var li = create("li");
attr( li, "class", "new" );

// 创建文本内容，并添加到 <li> 中
append( li, "Thanks for visiting!" );

// 把 <li> 元素插入到有序列表的顶端
before( first( tag("ol")[0] ), li );

一旦把元素插入到DOM中，就会渲染它。

注入HTML到DOM
直接向文档注入HTML最简便的方法就是innerHTML，假设有个一个空的<ol>元素并需要往里加入<li>，那么代码大致如下：

tag("ol")[0].innerHTML = "<li>Cats.</li><li>Dogs.</li><li>Mice.</li>";

这种方法虽然简单，但也有一些问题：
1. XML DOM 中并不存在 innerHTML 方法
2. 使用客户端 XSLT 创建的 XHTML 文档也不存在 innerHTML 方法
3. innerHTML 完全删除了元素内的任何节点，意味着没有像 DOM 方法一样追加或者插入的简便方法
为了弥补第3个问题，需要重写之前的before和append函数，在重写之前，需要建立一个checkElem函数，它可以处理HTML字符串，DOM元素以及DOM元素数组。

function checkElem(a) {
    var r = [];
    // 如果参数不是数组，则转换为数组
    if ( a.constructor != Array ) a = [ a ];

    for ( var i = 0; i < a.length; i++ ) {
        // 如果是字符串
        if ( a&#91;i&#93;.constructor == String ) {
            // 用一个临时元素来存放HTML
            var div = document.createElement("div");

            // 注入HTML,转换成DOM结构
            div.innerHTML = a&#91;i&#93;;

             // 提取DOM结构到临时的 div 中
             for ( var j = 0; j < div.childNodes.length; j++ )
                 r&#91;r.length&#93; = div.childNodes&#91;j&#93;;
        } else if ( a&#91;i&#93;.length ) { // 如果是数组
            // 假定是DOM节点数组
            for ( var j = 0; j < a&#91;i&#93;.length; j++ )
                r&#91;r.length&#93; = a&#91;i&#93;&#91;j&#93;;
        } else { // 否则，假定它是DOM节点
            r&#91;r.length&#93; = a&#91;i&#93;;
        }
    }
    return r;
}
&#91;/code&#93;
重写的 before 和 append 函数
&#91;code lang="js"&#93;
function before( parent, before, elem ) {
    // 检查是否提供 parent 参数
    if ( elem == null ) {
        elem = before;
        before = parent;
        parent  = before.parentNode;
    }

    // 获取元素数组
    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&#91;i&#93; );
    }
}
&#91;/code&#93;
这时向&lt;ol&gt;元素添加&lt;li&gt;的例子：
&#91;code lang="js"&#93;
append( tag("ol")&#91;0&#93;, "<li>Mouse trap.</li>" );
// 原始的HTML结构：
<ol>
<li>Cats.</li>
<li>Dogs.</li>
<li>Mice.</li>
</ol>
// 运行后的状态:
<ol>
<li>Cats.</li>
<li>Dogs.</li>
<li>Mice.</li>
<li>Mouse trap.</li>
</ol>
before( last( tag("ol")[0] ), "<li>Zebra.</li>" );
<ol>
<li>Cats.</li>
<li>Dogs.</li>
<li>Zebra.</li>
<li>Mice.</li>
</ol>

删除DOM节点
使用 removeChild 函数来删除节点，用法如下：
NodeParent.removeChild( NodeToRemove );

自定义的删除DOM节点的函数

// 删除一个独立的DOM节点
function remove( elem ) {
    if ( elem ) elem.parentNode.removeChild( elem );
}

从一个元素中删除所有子节点的函数

// 在DOM中，删除元素的所有子节点
function empty( elem ) {
    while ( elem.firstChild )
        remove( elem.firstChild );
}

例如：

remove( last( tag("ol")[0] ) )

将会把
<ol>
<li>Learn Javascript.</li>
<li>???</li>
<li>Profit!</li>
</ol>

转换成：
<ol>
<li>Learn Javascript.</li>
<li>???</li>
</ol>

如果执行：
empty( last( tag("ol")[0] ) )

则结果为：
<ol></ol>

转载请注明：陈童的博客 » DOM — 修改DOM