JSON to DOM or innerHTML?

JSON to DOM or innerHTML?

本文关键字：innerHTML or DOM to JSON      更新时间：2023-09-26

我有这个代码：

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元素

由于这里已经有了数据的结构表示（而不是要解析的原始HTML），所以我认为您的方法（使用DOM操作方法）比使用围绕.innerHTML构建的方法更有意义。在某些情况下，.innerHTML已经被证明是性能上的胜利，但我不确定在拥有不错JavaScript引擎的现代浏览器上是否如此。此外，将一块HTML放入innerHTML属性可能会带来很多好处，那就是无论如何都必须从JSON表示中构建该HTML，这也需要时间。由于必须处理JSON对象，因此使用DOM操作方法是一种明智的设计方法。

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

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

所以，使用DOM APIs，也许你可以清理和优化你的代码（例如，你不需要每次循环都执行getElementById来获得commentsContain引用，你可以把它放在外面；也不确定为什么每次添加注释都会删除第一个子项，在我看来，你可能会删除之前添加的注释，在这种情况下也可以优化）。

相关文章：