使用 jQuery 编写 HTML答案

【问题标题】：Using jQuery to write HTML使用 jQuery 编写 HTML
【发布时间】：2013-01-20 14:25:03
【问题描述】：

我正在尝试使用从另一个站点接收到的数据创建“提要”。它以类似对象的数组形式出现。我已经尝试了几种显示数据的方法，但一直在改变我的想法，以最好的方式来做到这一点。目前我正在使用 jQuery 循环遍历对象并通过嵌套 $(<div>).html() 为每个对象创建相同的 div

这使用的代码比我之前使用纯 javascript 添加新元素的方法要少得多，但我不确定这是否是 jQuery 的最佳用途。会有更好的方法来做到这一点吗？可能为每个数组元素创建一个新的 JavaScript 对象？

编辑：这是一小段代码。它没有关闭，我已经更改了类名和变量，但这是一个粗略的想法。

$.each(feed.data, function(i, var_name) {
    $("<div>").attr({
    "id" : var_name.created_time,
    "class" : "Post"
    }).html(
        $("<img>").attr({
        "class" : "Picture",
        "src" : "some_src" + var_name.id + "/picture"
        });

【问题讨论】：

让我们看看你的代码尝试.....
你可以直接使用$("#selector").append("<div class='this is whatever'>You Want</div>");，不过如果它让你感到困扰，像github.com/janl/mustache.js 这样的模板引擎可能会更好。
angularjs.org 也非常适合这样的事情。
谢谢，AngularJS 看起来非常强大！我最好去学习

标签： javascript jquery html object feed

【解决方案1】：

您的方法是所有可能的方法中效率最低的，因为对每个单独元素进行了大量的函数调用。

虽然您可以按照建议添加模板引擎，但也值得学习如何创建 html 字符串，并且会发现将每个元素包装在 $() 中并不会真正减少代码

var newHtml=[];
$.each(feed.data, function(i, var_name) {

    newHtml.push('<div id="'+var_name.created_time+'" class="Post">');
      newHtml.push('<img class="Picture" src="some_src"' + var_name.id + '/picture" />');

         /* some nested data*/
         $.each( var_name.someRepeatingElements), function(i,val){
             newHtml.push('<p>'+val.content+'</p>')
         });
     newHtml.push('</div>')
});

/* after looping all data only make one append to DOM*/

$('#someDiv').append( newHtml.join(''))

从语义上讲，这比嵌套大量 $.html() 调用更容易阅读

在许多没有大量复杂嵌套的情况下，创建自己的字符串比创建模板和代码来填充模板的工作量更少

【讨论】：