JSON 到 DOM 还是 innerHTML？答案

【问题标题】：JSON to DOM or innerHTML?JSON 到 DOM 还是 innerHTML？
【发布时间】：2012-04-17 20:14:57
【问题描述】：

我有这个代码：

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？

添加：要解析的对象：

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

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

【问题讨论】：

我相信innerHTML 主要是更快的选择，更不用说它需要更少的代码。

标签： javascript json dom innerhtml

【解决方案1】：

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

【讨论】：

那么...您的偏好是什么？
根据您问题中提供的信息，我认为您采用的方法很好。一些不相关的 cmets：使用更具描述性的变量名称将对您（可能还有其他人）有所帮助。使用d = [] 创建一个新数组，而不是过时的new Array() 方法。考虑将创建注释块的 DOM 创建方法移动到具有描述性名称的单独函数中，以鼓励代码重用。当然，我不知道代码 sn-ps 的整个上下文，所以 cmets 可能没那么有用。
非常感谢，朋友，我会的。但是这种方式不会消耗很多进程吗？

【解决方案2】：

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

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

所以，选择DOM APIs，也许您可以清理和优化您的代码（例如，您不需要在每个循环中执行getElementById 来获取 cmetsContainer 引用，您可以将它放在外面；也不是确定为什么每次添加评论时都会删除第一个孩子，在我看来，您可能会删除之前添加的评论，在这种情况下也可以进行优化）。

【讨论】：

谢谢，这对我很有用
-1，无论您使用.innerHTML 还是DOM 方法都无所谓，这两种方法都要求您包含与代码混合的标记数据。当然，DOM 代码通常更难维护和编写。
这不是真的。使用 DOM API，您可以清楚地区分 DOM 元素和对该元素执行的操作。使用innerHTML 你只有string。 DOM APIs 为您提供了更好、更清晰的分离，因为您为要创建/添加/修改的每个 HTML 元素都有对象。使用innerHTML 你有一个可以包含everything 的字符串。这就是为什么对我来说是意大利面条代码。