Question

在jquery中动态创建DOM对象时，最好使用纯字符串连接还是应该使用jquery方法？哪个更“jQuery方式”？

var tr = $('<tr/>').addClass('foobar');
// or    $('<tr class="foobar"/>');

tr.append('<td>' + someobj.property + '</td>');
// or ...
tr.append($('<td/>').text(someobj.property));

Answer 1

根据我的理解，更快只使用字符串创建对象，但有时使用辅助方法更方便。通常，我尽可能使用字符串连接，因为它减少了开销，但有时使用jQuery构建器方法更有意义。

Answer 2

使用最容易阅读的方式。就个人而言，我更喜欢$('<tr class="foobar"/>')和tr.append('<td>' + someobj.property + '</td>');

Answer 3

根据一些jQuery performance文章(2)，如果你通过添加/追加来大量操纵DOM，最好将所有内容一次性构建为字符串，然后作为一个整体附加到DOM。

如果偶尔会有小的更新，差异就不会很大。

我个人喜欢使用Resig's awesome micro templating技巧来构建HTML，然后将所有内容一次性追加..整洁而快速。也很容易修改。

Answer 4

最后一行不正确，因为text()上正在调用tr。

就个人而言，我会这样做：

var tr = $( '<tr>', {'class':'foobar'} );
$( '<td>', {text:someobj.property} ).appendTo( tr );

或：

var tr = $( '<tr>', {'class':'foobar'} )
             .append( $('<td>', {text:someobj.property}) );

Answer 5

使用jQuery方法的jQuery方式可能更多，但这是否是针对特定情况的最佳方式取决于最佳方式。

使用jQuery方法可能是最好的可读性。

字符串连接，推送到数组然后连接或使用文档片段可能是更好的性能方式。

根据您选择使用的方式，应该遵循的一点是在内存中构建结构并仅在DOM中执行一次插入。

Answer 6

我个人倾向于选择性能最佳的产品。我不是那个可能的超级专家，但看起来虽然这里的其他人已经开悟了我们什么，所以我会选择能给你带来最佳表现的东西。你想要的最后一件事是可能运行缓慢，因为你第一次没有考虑优化。

使用jQuery创建对象：字符串Concat还是方法？

6 个答案: