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>

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

中

$("#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);
});

Answer 2

为了你的速度快，将你的HTML保存到字符串或数组中，添加所有内容，最后只需添加。

如果您需要多次附加大量HTML，页面将会过度使用，因此不必添加许多内容。

Answer 3

这对你有用吗？

var longStr = '\
  <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> \
';

$('#container').append(longStr);

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

3 个答案: