javascript - 最小的 jQuery 模板

Question

我正在创建一个用户界面，用户可以在其中添加/删除项目(具有相似的布局)。

它以一项开始，您可以单击“添加”以添加更多项。 UI 由几种不同类型的项目组成。

我目前正在做的是填充单个项目 item 1(每种类型)，并在 add 事件中克隆 item 1，替换用户在 item 1 中所做的更改，并将克隆附加到 container。简而言之，我不是使用 jQuery 动态创建 html，而是克隆 div 的 html。但是在这种方法中，我必须更改很多东西才能使新项目保持初始状态。

所以，我想避免替换用户所做的编辑，所以我想像下面这样，

<script type="text/template" id="item_type1">
  <div>
    <div>Box</div>
  </div>
</script>

<script type="text/template" id="item_type2">
  <div>
    <div>Box2</div>
  </div>
</script>

在 add 事件中，我想做一些类似 $('#item_type1').html() 和 $('#item_type2') 创建新项目。

我知道有一些复杂的库，例如 handlebar 和 mustache，underscore 有自己的模板实现方式。

但我还没有使用其中任何一个，因此不想仅仅为了复制内容而包含它们。我不想要什么特别的东西。我没有传递变量。我只是克隆了一些标记以便一次又一次地使用。

这种在 script 标签中插入 html 的方式是否适用于所有浏览器？这是一个好方法吗？

编辑:

它用于 wp 插件，我假设 js 已打开，否则该插件将无法正常工作。

Answer 1

关于:

例如，您的 HTML 应该是:

<script type="text/template" id="item_type1">
  <div>
    <h1>Box1</h1>
    <p>
    </p>
  </div>
</script>

你的代码将是:

var templateHtml = $('#item_type1').html();

var $item = $(templateHtml);
$('body').append($item);
$item.on('click', function() {});

这是一种适用于所有浏览器的简单方法。