JavaScript：我应该如何生成大量 HTML？ [复制]

Posted 2023-03-05

【中文标题】JavaScript：我应该如何生成大量 HTML？ [复制]

【英文标题】：JavaScript: How should I generate a lot of HTML? [duplicate]

【发布时间】：2011-10-10 23:56:30

【问题描述】：

可能重复：Is there a best practice for generating html with javascript

我想用 JavaScript 生成网站的大部分内容。

直接的方法是形成一个包含所有 HTML 的大字符串：

'<div>'
   + '<span>some text</span>'
   + '<form>'
      + '<input type="text" />'
...

但是当一个人必须以这种风格写几百行时，这会变得很烦人。以及以后必须更改此类代码时的痛苦...

你能想出更简单的方法吗？

【问题讨论】：

使用 jQuery，您可以通过在对象等中提供数据而不是一个大字符串，以一种更“有组织”的方式来完成它。虽然我猜它会慢一些。

【参考方案1】：

到目前为止，最好的方法是使用某种 JavaScript 模板系统。这比使用 CSS 隐藏 HTML 更好的原因是，如果（例如）有人禁用了 CSS，他们将能够看到您的模板，这显然不理想。

使用模板系统，您可以将模板放在<script> 标记中，这意味着它们对除 JavaScript 之外的所有内容都完全隐藏。

我最喜欢的是 jQuery 模板系统，主要是因为 jQuery 现在无处不在。你可以从这里得到它：http://api.jquery.com/category/plugins/templates/

一个例子（取自 jQuery 文档）：

<ul id="movieList"></ul>

<!-- the template is in this script tag -->    
<script id="movieTemplate" type="text/x-jquery-tmpl">
    <li><b>$Name</b> ($ReleaseYear)</li>
</script>

<!-- this script will fill out the template with the values you assign -->    
<script type="text/javascript">
    var movies = [
         Name: "The Red Violin", ReleaseYear: "1998" ,
         Name: "Eyes Wide Shut", ReleaseYear: "1999" ,
         Name: "The Inheritance", ReleaseYear: "1976" 
    ];

    // Render the template with the movies data and insert
    // the rendered HTML under the "movieList" element
    $( "#movieTemplate" ).tmpl( movies )
        .appendTo( "#movieList" );
</script>

这是一个简单的例子，但是你可以把你想要生成的所有 HTML 放在<script> 中，使它更加灵活（对不同的工作使用相同的 HTML sn-p，只需填补空白)，甚至使用许多模板来构建更大的 HTML sn-p。

【参考方案2】：

创建sn-ps作为模板，放入一个不可见的<div>：

<div style="display: none">
   <div id="template1">
      <h2 class="header_identifyingClass">Hello from template</h2>
   </div>
   <div id="template2">
      <span class="content">Blah blah</span>
   </div>
</div>

然后找到它，

document.getElementById("template1"); 

填写它的内部值，例如通过 XPath 或 jQuery 查找内部元素并填充它们，例如使用element.innerHTML = "Hello from new value"，并将其移动或复制到DOM的可见部分。

创建多个模板并多次复制以生成多个。 不要忘记更改副本的 ID 以使其正常工作。

PS：我想我在JUnitDiff项目的代码中使用了这种方法。但它被隐藏在 XSLT 中，它有另一个用途。

【讨论】：

打败我。这是我的首选方法。如果做得正确，这比在 JavaScript 中构造/连接 HTML 字符串更易于维护。

很好的答案，但想想如果有人关闭了 CSS 会发生什么......他们会看到你的模板。请考虑使用基于 JavaScript 的模板引擎。

【参考方案3】：

如果您只是在 javascript 事件中添加到页面中的静态内容，您可以考虑一直将其放在您的主 HTML 页面中，但使用 display:none; 设置样式。

那么这只是改变它的样式以使其出现在页面上的情况。容易得多。

即使它是动态的，您也可以使用这种技术：将其中的外壳 HTML 内容隐藏在您的页面中，并在使其可见之前填充动态位。

希望有帮助。

【参考方案4】：

使用 JavaScript 的方言，例如 CoffeeScript。它有 heredocs：

'''
  <div>
    <span>some text</span>
    <form>
      <input type="text" />
'''

如果你需要抛出一个偶尔的表达式，你可以使用插值：

"""
  <title>#title</title>
"""