正在使用Javascript创建HTML。。。从页面复制还是存储在变量中？

因此，我正在创建一个按钮，用于将新的

添加到一组

标记中。这是一个相当复杂的

，有很多配置选项，最终大约有30-40行代码

我的问题是，我应该将股票

的HTML存储为Javascript变量，还是将其隐藏在DOM中，通过jQuery引用

，并将内容设置为变量。我的页面中会有很多这样的代码，所以我担心用Javascript生成大量HTML

var item_html = 
    '<div>'+
      .... 30-40 lines of code .....
    '</div>';
$('new_item').on('click',function(){
  $('#Container').append(item_html);
});

---

我建议将其存储在变量中。这样，您就不会加载不必要的html，只有用户选择单击链接时才会查看这些html。

我建议将其存储在变量中。这样，您就不会加载不必要的html，只有当用户选择单击链接时才会查看这些html。

实际上有许多可行的解决方案。一些JavaScript框架已经提出了自己的解决方案，这些解决方案在内部很复杂，但易于使用

我喜欢的一个方法是将它们放在

标记中。HTML5对此有一个自定义机制，但本质上你可以将其放在你的头脑中：

<script type="text/html/imadeupthistype">
  <div>Etc</div>
</script>

等

类型在这里很重要-只要它存在并且不是“text/javascript”类型，那么浏览器就会知道它是一种它无法识别的类型，并且不会尝试将其解析为这种类型。它还将把标记的内部视为自定义数据，因此它只知道它的内容是一个大的文本块。如果向
脚本添加ID，或者以其他方式引用，则可以检索此内容

如果您有一个库来处理异步逻辑，那么您还可以将大量的HTML片段放在它们自己的模板文件中，您的javascript在运行之前会加载这些模板文件。一些框架使这变得更容易，所以最好不要重新发明这个轮子。这种方法的优点是，IDE通过扩展将其识别为HTML，并应用语法高亮显示和注释错误。
实际上有许多可行的解决方案。一些JavaScript框架已经提出了自己的解决方案，这些解决方案在内部很复杂，但易于使用

我喜欢的一个方法是将它们放在
标记中。HTML5对此有一个自定义机制，但本质上你可以将其放在你的头脑中：

<script type="text/html/imadeupthistype">
  <div>Etc</div>
</script>


等

类型在这里很重要-只要它存在并且不是“text/javascript”类型，那么浏览器就会知道它是一种它无法识别的类型，并且不会尝试将其解析为这种类型。它还将把标记的内部视为自定义数据，因此它只知道它的内容是一个大的文本块。如果向
脚本添加ID，或者以其他方式引用，则可以检索此内容

如果您有一个库来处理异步逻辑，那么您还可以将大量的HTML片段放在它们自己的模板文件中，您的javascript在运行之前会加载这些模板文件。一些框架使这变得更容易，所以最好不要重新发明这个轮子。这种方法的优点是，IDE通过其扩展将其识别为HTML，并应用语法高亮显示和注释错误。
使用HTML5模板元素。我相信这就是它被引入的确切原因：
使用HTML5模板元素。我相信这就是引入它的确切原因：
你可能想考虑使用一个类型为“代码>文本/模板/<代码>的脚本块，这样HTML就不是一堆难以维护的串联字符串。您可以使用现有的模板引擎，也可以使用自己的模板引擎。如果内容是基于其他变量定制的，而不是存储大量表示HTML节点的文本，那么您可以使用模板引擎，或者框架使用的库。其优点包括可维护性、清晰的代码/易读性、解耦性和可重用性。我现在并不想介绍一个新的JS库，但这对于未来的新项目来说是一个好消息。我很高兴知道这个存在。
文本/模板
的想法很有趣。这是否与<代码> <代码>解决方案相同？您可能需要考虑使用类型为“代码>文本/模板< /代码>的脚本块，这样HTML不是一系列难以维护的串联字符串。您可以使用现有的模板引擎，也可以使用自己的模板引擎。如果内容是基于其他变量定制的，而不是存储大量表示HTML节点的文本，那么您可以使用模板引擎，或者框架使用的库。其优点包括可维护性、清晰的代码/易读性、解耦性和可重用性。我现在并不想介绍一个新的JS库，但这对于未来的新项目来说是一个好消息。我很高兴知道这个存在。
文本/模板
的想法很有趣。这与
解决方案相同吗？那么这个解决方案本质上与
解决方案相同吗？是的。我不确定官方标准化的
解决方案的可用性有多广，但我的相同方法的旧版本在所有浏览器中都可用，包括旧IE版本（我在9-5工作时恰好支持旧IE版本）。是的，我想这是赢家。非常感谢你的建议！嘿，这非常好，但我认为HTML5选项可能是最正确的。不过这太棒了。@DigitalMC没问题。最长的答案当然并不总是最正确/最有用的。那么这个解决方案与
解决方案基本相同吗？是的。我不确定官方标准化的
解决方案的可用性有多广，但我的相同方法的旧版本在所有浏览器中都可用，包括旧IE版本（我在9-5工作时恰好支持旧IE版本）。是的，我想这是赢家。非常感谢你的建议