使用 Javascript 创建 HTML ...从页面复制或存储在变量中？答案

【问题标题】：Creating HTML with Javascript... Copy from page or store in variable?使用 Javascript 创建 HTML ...从页面复制或存储在变量中？
【发布时间】：2016-08-16 19:50:40
【问题描述】：

所以我正在创建一个按钮，将一个新的<div> 添加到一组<div> 标记中。这是一个相当复杂的<div>，有很多配置选项，最终大约需要 30-40 行代码。

我的问题基本上是我应该将股票 <div> 的 HTML 存储为 Javascript 变量还是将其隐藏在 DOM 中并通过 jQuery 引用 <div> 并将内容设置为变量。我的页面中会有很多这样的代码，所以我担心用 Javascript 生成大量的 HTML

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

或

$('new_item').on('click',function(){
  $('#Container').append($('#new_item_html').html());
});

【问题讨论】：

您可能需要考虑使用类型为text/template 的脚本块，这样HTML 就不会是一堆难以维护的串联字符串。如果内容是基于其他变量自定义的，您可以使用现有的模板引擎或滚动自己的模板stackoverflow.com/questions/4912586/…
您可以使用模板引擎 HTML5 native 或诸如 handlebars.js 之类的库，而不是存储大量表示 HTML 节点的文本，框架将其用作 Ember。优点包括可维护性、清晰的代码/易读性、解耦和可重用性。
我现在并不想引入一个新的 JS 库，但对于新项目的推进来说，这是件好事。我很高兴知道这存在。 text/template 的想法很有趣。这和<template>的方案一样吗？

标签： javascript jquery html performance

【解决方案1】：

使用 HTML5 模板元素。我相信这就是它被引入的确切原因：https://developer.mozilla.org/en/docs/Web/HTML/Element/template

【讨论】：

所以从我的研究来看，这是“技术上”正确的答案......但由于 IE 尚不支持它，这不是“最佳”答案。不过，这真的很酷。感谢您的提示！
@DigitalMC IE 确实不支持它，但它只是作为普通的 HTML 元素做出反应。您可以轻松地在其上放置 display: none 并在所有浏览器中使用它。编辑：仅供参考，我们在支持 IE9 及更高版本的生产站点上使用它。
知道了，所以只要写一些 CSS template {display:none} 就可以确保它被隐藏了？
@DigitalMC 正确。这里的所有都是它的。它比使用自定义类型创建脚本标签要干净得多+它是未来的证明。所有主流浏览器（除了 IE 和 Opera mini）似乎都完全支持：caniuse.com/#feat=template，其他只依赖 display: none 部分。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

我喜欢将它们放在<script> 标签中。 HTML5 对此有一个自定义机制，但基本上你可以把它放在你的脑海中：

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

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

如果您有一个库来处理异步逻辑，您还可以将大段的 HTML 放在它们自己的模板文件中，您的 javascript 在运行之前加载这些文件。一些框架使这更容易，所以最好不要重新发明那个轮子。这种方法的优点是您的 IDE 将通过其扩展名将其识别为 HTML，并应用语法突出显示和注释错误。

【讨论】：

那么这个解决方案与<template>解决方案本质上是一样的吗？
是的。我不确定官方的标准化<template> 解决方案的可用性有多大，但是我的相同方法的旧版本在所有浏览器中都可用，包括旧的 IE 版本（我碰巧在我的 9-5 工作中支持）
是的，我认为这是赢家。非常感谢您的建议！
嘿，这非常好，但我认为 HTML5 选项可能是最正确的。不过这真是太棒了。
@DigitalMC 没问题。最长的答案当然并不总是最正确/最有用的。