javascript - 使用 jQuery 附加多个 div 和图像以及其他标签的最佳方法是什么？

Question

假设我有一些名为 container 的大外部 div，我想附加一堆具有这种格式的数据:

<div class="row faces-row valign-wrapper">
  <div class="col s3"><img class="responsive-img" src="../img/face-panel/image-5.png"/></div>
  <div class="col s3">Happy Face</div>
  <div class="col s2 center-align">A</div>
  <div class="col s2 center align">A</div>
  <div class="col s2 center align">A</div>
</div>

我的意思是我可以复制粘贴整个 block 并将其作为一个字符串放在里面

$("#container").append(very_long_string); 但显然有更好的方法，并且想知道你们是否有一些见解可以提供给我:)？

我可以这样做，但我希望有一种更简洁的方法:

$('#container').append(
  '<div class="row face-row valign-wrapper">' + 
  '<div class="col s3"><img class="responsive-img" src="../img/face-panel/face-5.png"/></div>' +
  '<div class="col s3">HAPPY FACE</div>' + 
  '<div class="col s2 center-align">A</div>' + 
  '<div class="col s2 center align">A</div>' + 
  '<div class="col s2 center align">A</div>' + 
  '</div>'
);

Answer 1

如果你想动态地添加内容到 div 容器。你也可以使用模板引擎。根据你的要求。你可以使用 javascript 模板引擎 mustache.js

用您的内容创建一个 html 页面。您也可以动态添加内容。这不是您的要求。但我们也可以这样做。

$.get('../path-to-template/template.html', function (template) {
        renderdContent = Mustache.render(template,options);
});