Question

我有这段代码：

try {
    var _o, _l, i, _d = new Array(), _c;
    _o = JSON.Parse( Request.Response );
    for ( i = 0, _l = _o.length; i < _l; i++ ) {
        _d[ i ] = document.createElement('div');
        _c = document.getElementById('comentsContainer');
        _c.removeChild( _c.firstChild );
        _d[ i ].className = 'comment-user';
        _c.appendChild( _d [i] );
    }
}
catch ( w ) {
    console.log( w );
}

问题是，这种方式更好还是我应该使用innerHTML？

ADD：要解析的对象：

"comments" : [
  { "user" : "foo", "comment" : "foo", "date" : "foo/foo/bar", "id_comment" : "bar" },
  { /* the same as above x10 */ }
]

请注意，我想将每个数组中的每个对象解析为DOM元素

Answer 1

由于你已经在这里有数据的结构表示（而不是原始HTML来解析），我会说你的方法（使用DOM操作方法）比使用围绕.innerHTML构建的方法更有意义。在某些情况下，.innerHTML已经表现出了性能上的胜利，但我不确定现代浏览器是否具有良好的JavaScript引擎。此外，将一大块HTML放入innerHTML属性可能获得的许多好处是，您必须从JSON表示构建HTML，这也需要时间。由于必须处理JSON对象，因此使用DOM操作方法是一种明智的设计方法。

Answer 2

我会说DOM操作是一种更简洁的方法：innerHTML有点spaghetti code，你将标记语言与行为（JavaScript）混合在一起，你没有最后一个清晰的结构。此外，在大多数现代浏览器中，DOM API在性能方面更快或相当于innerHTML - 遗憾的是IE和Opera并非如此：

http://jsperf.com/innerhtml-or-dom/4

所以，转到DOM APIs，也许你可以清理并优化你的代码（例如你不需要在每个循环中执行getElementById来获取commentsContainer引用，你可以拥有它外部;也不确定为什么每次添加评论时都删除了第一个孩子，在我看来你可能会删除之前添加的评论，在这种情况下也可以进行优化。）

JSON到DOM还是innerHTML？

2 个答案: