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

Question

可能的重复：
是否有使用 javascript 生成 html 的最佳实践

我想用 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 中，用于另一个目的。