JSON 到 DOM 还是 innerHTML？

Posted 2023-05-07

【中文标题】JSON 到 DOM 还是 innerHTML？

【英文标题】：JSON to DOM or 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 主要是更快的选择，更不用说它需要更少的代码。

【参考方案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 的字符串。这就是为什么对我来说是意大利面条代码。