Javascript - HTML 连接的其他方法

Javascript - Alternative to HTML concatenation

本文关键字：其他 方法 连接 HTML Javascript      更新时间：2023-09-26

可能的重复项：
JavaScript：我应该如何生成大量的HTML？

我觉得做这样的事情真的很愚蠢：

var html = '<div><ul>';
for(var i=0; i<10; i++) {
   html += '<li>' + i + '</li>';
}
html += '</ul></div>';
$("body").html(html);

有没有办法使用模板而不是像那样连接字符串？我知道可以选择使用 JS 填充现有元素并在需要显示时更改显示以阻止，但这似乎相当黑客和烦人，尤其是在使用循环时。

我也对任何前端模板/框架建议持开放态度。

这个问题可能以前问过，但我找不到任何关于SO的线索。任何见解将不胜感激。

编辑：

澄清一下，我会对这样的事情感兴趣：

// li_list.haml
%div
   %ul
      - for i in #{range}
         %li i
// app.js
// require li_list.haml with {range: 10}

您绝对可以使用模板，但这需要外部库。

就我个人而言，我喜欢 KnockoutJs，它具有模板、双向绑定到 dom 和其他好东西。 这是他们关于模板的演示

我知道

它没有被标记，但看到你的问题似乎正在使用它：jQuery 在他们的 API 文档中列出了一个tmpl插件。

对于非jquery解决方案，Jon Resig有一篇关于他的微模板技术的好文章。

最后，如果你只是连接一堆东西，数组会创造奇迹：

而不是：

var html = '<div><ul>';
for(var i=0; i<10; i++) {
   html += '<li>' + i + '</li>';
}
html += '</ul></div>';
$("body").html(html);

您可以使用：

var html,
    i;
html = ['<div><ul>'];
for (i = 0; i < 10; i += 1) {
    html.push('<li>', i, '<li>')
}
html.push('</ul></div>');
$('body').html(html.join(''));

没有显着差异，但至少您可以执行数组操作。

尝试原型模板。

您可能还想尝试闭包 JS 模板。

相关文章：