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"')
]);

Answer 2

innerHTML比DOM快definitely（参见讨论部分）。前段时间，我遇到了一种用innerHTML方便地编写大型HTML结构的方法，它比字符串连接更好，或者必须编写大型结构：

var html = [
   '<ul class="myclass">',
      '<li class="item">item1</li>',
      '<li class="item">item2</li>',
      '<li class="item">item3</li>',
      '<li class="item">item4</li>',
      '<li class="item">item5</li>',
   '</ul>'
].join("");

root.innerHTML =html;

Answer 3

正如我在评论中提到的，innerHTML实际上比创建DOM节点更快，但它是非结构化的。

比创建DOM节点更快但仍然是结构化的方法是使用the DOM 2 table methods：

var tr = root.insertRow(-1);
var td = tr.insertCell(0);
var txt = document.createTextNode("some value");
td.appendChild(txt);
// or simply: td.innerHTML = "some value";

Answer 4

嘿，我在这个游戏上已经迟到了，但是想为大家添加这些信息。在一些移动浏览器开发期间，我遇到了这个问题，并希望亲眼看看这些日子哪个更好。

在我的Android手机上，这里有一些有趣的结果：

      DOM: 614 / 25
innerHTML: 697 / 542
      DOM: 546 / 18
innerHTML: 639 / 552
      DOM: 604 / 12
innerHTML: 641 / 534
      DOM: 619 / 11
innerHTML: 643 / 554
      DOM: 618 / 13
innerHTML: 655 / 600

第一个数字是添加2700个li元素的实际执行情况。并且，更有趣是第二个数字，即ol使用innerHTML = '';清除这些结果需要多长时间

在DOM vs innerHTML尝试自己。

Answer 5

innerHTML原本是IE的东西，我相信。

我也认为你设置它，因为它不是一个方法，所以第二个例子是

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

但是要回答你的问题，innerHTML更方便，但通常说它更慢。但是，KennyTM在评论中说much faster。

您必须决定性能权衡（可能可以忽略不计）是否值得以DOM API方式或innerHTML方式进行。

Answer 6

使用jQuery http://jquery.com/

$('#root tbody').append('<td><td>some value</td></td>');

它甚至会使用正确的DOM方法。

编辑：来自jQuery文档：

jQuery快速而简洁 JavaScript库简化了 HTML文档遍历，事件处理，动画和Ajax 快速网络的互动发展。 jQuery旨在改变你写作的方式的JavaScript。

**编辑：**此外，我在上面做了一个更符合HTML的样本@koby;）

Answer 7

我会重新排序以使其更具可读性

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

Answer 8

我自己写了一些比较innerHTML和DOM API的测试。 DOM API肯定更快。

以下是结果（我在Firefix 3.6.8和Chrome 5.0.375.125 beta上测试过）： http://yilmazhuseyindevelopment.appspot.com/ois/images/ahh5aWxtYXpodXNleWluZGV2ZWxvcG1lbnRyEQsSCUltYWdlRGF0YRiptwUM

在第一个测试中，我使用DOM API和innerHTML将一个textnode添加到页面主体1000次。

在第二个测试中，我创建了一个包含DOM API和内部HTML的表。这是我测试的实际代码：

<html>
    <head>
        <script type="text/javascript">
        window.onload = function(){
            var body = document.getElementsByTagName("body")[0];
            var text,table,tr,td;
            var count = 1000;
            console.time("DOM");
            for(var i = 0 ; i<count ; i++){
                    text = document.createTextNode("text");
                    body.appendChild(text);
                    body.removeChild(text)
            }
            console.timeEnd("DOM");
            console.time("innerHTML");
            for(var i = 0 ; i<count ; i++){
                body.innerHTML = "text";
                body.innerHTML = "";
            }
            console.timeEnd("innerHTML");
            //table structure
            console.time("DOM2");
            for(var i = 0 ; i<count ; i++){
                    table = document.createElement("table");
                    tr = document.createElement("tr");
                    td = document.createElement("td");
                    text = document.createTextNode("text");
                    table.appendChild(tr);
                    tr.appendChild(td);
                    td.appendChild(text);
                    body.appendChild(table);
                    body.removeChild(table);
            }
            console.timeEnd("DOM2");
            console.time("innerHTML2");
            for(var i = 0 ; i<count ; i++){
                body.innerHTML = "<table><tr><td>text</td></tr></table>";
                body.innerHTML = "";
            }
            console.timeEnd("innerHTML2");
        }
        </script>
    </head>

    <body/>
</html>

我想这意味着现代浏览器的DOM API更好（性能更好）。

Answer 9

您是否尝试使用JavaScript模板引擎？

它们通常按innerHTML注入HTML字符串，并且比桌面和移动设备中的DOM操作更快，同时保持视图和逻辑之间的分离。

我们使用PURE来完全分离HTML标记和JavaScript逻辑。设计人员和开发人员可以在相同的资源上一起工作。

如果您不喜欢它，您可以在网上找到更多符合您口味的其他人。

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

9 个答案: