JavaScript：如何生成大量HTML？

可能重复：

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

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

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

“”
+“一些文本”
+ ''
+ ''
...

但是当一个人不得不用这种风格写几百行的时候，这就变得很烦人了。当这些代码以后不得不更改时的痛苦

---

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

创建片段作为模板，将它们放入一个不可见的

：

填充它的内部值，例如通过XPath或jQuery查找内部元素并填充它们，例如使用

element.innerHTML=“Hello from new value”

，然后将其移动或复制到DOM的可见部分

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

---

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

使用JavaScript的方言，比如CoffeeScript。它有遗传：

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

“”
一些文本
'''

如果需要插入临时表达式，可以使用插值：

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

“”“
#{title}
"""
< /代码> 如果只是在JavaScript事件中添加到页面上的静态内容，您可以考虑只在主HTML页面中使用它，但样式<>代码>显示：无；代码>

然后，它只是一个改变它的风格，使其出现在页面上的情况。容易多了

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

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

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

我最喜欢的是jQuery模板系统，主要是因为jQuery现在无处不在。您可以从这里获得：

示例（摘自jQuery文档）：


${Name}（${ReleaseYear}）
var电影=[
{名称：“红色小提琴”，发行年份：“1998”}，
{名称：“闭上眼睛”，发布年份：“1999”}，
{名称：“遗产”，发布年份：“1976”}
];
//使用电影数据渲染模板并插入
//“movieList”元素下呈现的HTML
$（“#movieTemplate”）.tmpl（电影）
.附于（“#movieList”）；

这是一个简单的示例，但您可以将所有要生成的HTML放在
中，使其更加灵活（对各种作业使用相同的HTML片段，只需填补空白），甚至可以使用许多模板构建更大的HTML片段
 使用jQuery，您可以通过在对象等中提供数据，而不是一个大字符串，以一种更“有组织”的方式来完成。我想会慢一点，快来吧。这是我喜欢的方法。如果操作正确，这比在JavaScript中构造/连接HTML字符串更容易维护。回答得好，但想想如果有人关闭了CSS会发生什么。。。他们会看到你的模板。而是考虑基于JavaScript的模板引擎。
'''
  <div>
    <span>some text</span>
    <form>
      <input type="text" />
'''

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

<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>