Javascript jQuery-为每个对象创建新的div？

我有一个html代码块

<div class="modal-comment-content">
      <ul class="list-inline">
        <li><a href="#"><img src="/defaultpic.jpg" width="100" class="img-circle"></a></li>
        <li>
          <ul class="list-unstyled">
            <li><a href="#" class="comment_username">John D.</a></li>
            <li class="comment_created_at">~ 4 hours ago</li>
          </ul>
        </li>
      </ul>
      <p class="comment_comment">This is a completely random sentence. This is the second sentence. Closing sentence right here.</p>
      <hr>
</div>

~4小时前



这是一个完全随机的句子。这是第二句话。结束语就在这里

我有一个for循环，它迭代对象数组

for (var i = 0; i < json.length; i++)
    {
      var user = json[i].user.first_name + ' ' + json[i].user.last_name.charAt(0) + '.';
      var comment     = json[i].comment;
      var created_at  = json[i].created_at;

    }

for（var i=0；i

---

我想使用html代码块作为数组对象每次迭代的“模板”。关于如何做到这一点有什么想法吗？关于，

根据项目的规格，有几种方法：

HTML5模板 如果您知道您的用户属于以下类别，则可以使用新的HTML模板功能

JS模板 如果您的项目足够大，并且您知道您将经常使用此类代码，那么您可以使用类似的方法来以一种简单且可维护的方式处理模板

jQuery DOM字符串 最快（也是最脏）的方法是创建一个返回生成HTML字符串的函数，然后将其附加到DOM：

function buildCard(person) {
    return '<div class="card"><h2>'+person.name+'</h2><p>'+person.details+'</p></div>';
}

功能构建卡（人）{
返回“+person.name+”“+person.details+”
”；
}

根据项目的规格，有几种方法：

HTML5模板 如果您知道您的用户属于以下类别，则可以使用新的HTML模板功能

JS模板 如果您的项目足够大，并且您知道您将经常使用此类代码，那么您可以使用类似的方法来以一种简单且可维护的方式处理模板

jQuery DOM字符串 最快（也是最脏）的方法是创建一个返回生成HTML字符串的函数，然后将其附加到DOM：

function buildCard(person) {
    return '<div class="card"><h2>'+person.name+'</h2><p>'+person.details+'</p></div>';
}

功能构建卡（人）{
返回“+person.name+”“+person.details+”
”；
}

如果您使用Angular JS，则始终会有NG Repeat标记，并将HTML代码（即您的模板）绑定到模型上。以下是文件：

如果您只是在进行快速破解，而框架的使用并不符合您的兴趣，那么您随时可以这样做

// create the template variable using your div content and some special tokens
var template = '<div class="modal-comment-content">
  <ul class="list-inline">
    <li><a href="#"><img src="%USER_IMAGE%" width="100" class="img-circle"></a></li>
    <li>
      <ul class="list-unstyled">
        <li><a href="#" class="comment_username">%USERNAME%</a></li>
        <li class="comment_created_at">%CREATED_AT%</li>
      </ul>
    </li>
  </ul>
  <p class="comment_comment">%COMMENT%</p>
  <hr>
</div>';

var jLen  = json.length;
var parentDiv = $('#parentDiv');

// create and attach a new 'Div' to some parent
// using the template, replacing the tokens with dynamic values from the list.
for (var i = 0; i < jLen; ++i)
{
  var user = json[i].user.first_name + ' ' + json[i].user.last_name.charAt(0) + '.';
  var comment     = json[i].comment;
  var created_at  = json[i].created_at;
  var divContent = template.replace('%COMMENT%', comment).replace('%CREATED_AT%', created_at).replace('%USERNAME%', user);

  parentDiv.append(divContent);
}

//使用div内容和一些特殊标记创建模板变量
var模板





%created\u at%



%comment%

';
var jLen=json.length；
var parentDiv=$（“#parentDiv”）；
//创建新的“Div”并将其附加到某个父级
//使用模板，将标记替换为列表中的动态值。
对于（变量i=0；i

如果您使用Angular JS，则始终会有NG Repeat标记，并将HTML代码（即您的模板）绑定到模型上。以下是文件：

如果您只是在进行快速破解，而框架的使用并不符合您的兴趣，那么您随时可以这样做

// create the template variable using your div content and some special tokens
var template = '<div class="modal-comment-content">
  <ul class="list-inline">
    <li><a href="#"><img src="%USER_IMAGE%" width="100" class="img-circle"></a></li>
    <li>
      <ul class="list-unstyled">
        <li><a href="#" class="comment_username">%USERNAME%</a></li>
        <li class="comment_created_at">%CREATED_AT%</li>
      </ul>
    </li>
  </ul>
  <p class="comment_comment">%COMMENT%</p>
  <hr>
</div>';

var jLen  = json.length;
var parentDiv = $('#parentDiv');

// create and attach a new 'Div' to some parent
// using the template, replacing the tokens with dynamic values from the list.
for (var i = 0; i < jLen; ++i)
{
  var user = json[i].user.first_name + ' ' + json[i].user.last_name.charAt(0) + '.';
  var comment     = json[i].comment;
  var created_at  = json[i].created_at;
  var divContent = template.replace('%COMMENT%', comment).replace('%CREATED_AT%', created_at).replace('%USERNAME%', user);

  parentDiv.append(divContent);
}

//使用div内容和一些特殊标记创建模板变量
var模板





%created\u at%



%comment%

';
var jLen=json.length；
var parentDiv=$（“#parentDiv”）；
//创建新的“Div”并将其附加到某个父级
//使用模板，将标记替换为列表中的动态值。
对于（变量i=0；i

这可以通过纯jquery实现吗？我以前从未见过这样的事。您能解释一下%COMMENT%在var模板中的含义吗？它是纯jQuery，%%字符串只是一种在模板中查找/替换值的方法。它没有什么特别之处，只是一些通常不会在字符串中使用的东西。如果您喜欢，可以使用“@&COMMENT^%”。正如比弗勒斯所说，这只是我选择的一个术语，使“替换”变得简单。您可以选择任何您喜欢的，或者使用连接（可以说连接速度更快，但在代码方面更难阅读），这可以通过纯jquery实现吗？我以前从未见过这样的事。您能解释一下%COMMENT%在var模板中的含义吗？它是纯jQuery，%%字符串只是一种在模板中查找/替换值的方法。它没有什么特别之处，只是一些通常不会在字符串中使用的东西。如果您喜欢，可以使用“@&COMMENT^%”。正如比弗勒斯所说，这只是我选择的一个术语，使“替换”变得简单。您可以选择任何您喜欢的，或者使用串联（可以说是更快，但更难理解代码）