什么是更好的DOM操作 - DOM API或innerHTML？

Question

我有以下代码:

tr = document.createElement("tr");
root.appendChild(tr);
td = document.createElement("td");
td.appendChild(document.createTextNode("some value"));
tr.appendChild(td);

好吧,这段代码和

root.innerHTML = "<tr><td>some value</td></tr>";

第一个版本可能是更好的方法,因为浏览器不必呈现字符串.但它太长了.特别是对于更大的结构,这种实现变得非常难以阅读.所以我觉得有更好的方法来编写它(没有任何JavaScript库).你将如何实现这一点,以便代码更具可读性？(现在我将代码与评论分开.)

Answer 1

您总是可以围绕笨重的DOM API编写包装函数,以使代码更具可读性.我经常使用类似的东西:

function newElement (type,attr,children) {
    var el = document.createElement(type);
    for (var n in attr) {
        if (n == 'style') {
            setStyle(el,attr[n]); /* implementation of this function
                                   * left as exercise for the reader
                                   */
        }
        else {
            el[n] = attr[n];
        }
    }
    if (children) {
        for (var i=0; i<children.length; i++) {
            el.appendChild(children[i]);
        }
    }
}
function newText (text) {
    document.createTextNode(text);
}

然后你可以编写更多的声明性代码:

var tr = newElement('tr',{},[
    newElement('td',{},[
        newText('some value')
    ])
]);

记住css和javascript之间的区别:

var div = newElement('div',{
    className:'foo',
    style:{
        marginLeft:'10px'
    }
},[
    newText('notice we use "className" instead of class" '+
            'and "marginLeft" instead of "margin-left"')
]);