Question

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

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

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

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

但是，如果必须以这种方式写几百行，这会非常烦人。这些代码必须在以后改变时的痛苦...

你能想到一个更简单的方法吗？

Answer 1

将代码段创建为模板，将其置于不可见的<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中，它有另一个目的。

Answer 2

到目前为止，最好的方法是使用某种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代码段，只需填补空白），甚至使用许多模板来构建更大的HTML片段。

Answer 3

使用像CoffeeScript这样的JavaScript方言。它有heredocs：

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

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

"""
  <title>#{title}</title>
"""

Answer 4

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

然后只是改变它的风格以使其出现在页面上。更容易。

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

希望有所帮助。

JavaScript：我应该如何生成大量HTML？

4 个答案: