在没有 JavaScript 选择器的情况下设置 HTML 模板标签内容

问题描述

假设我们有以下 HTML 模板：

<template id="my_template">
  <div>
    <h4>Test Titel</h4>
    <div class="row">
      <label for="someinput">Stichwort:</label>
      <input id="someinput" type="text"/>
    </div>
  </div>
</template>

现在我喜欢基于该模板呈现包含多个项目的列表。我知道我们可以像在常规 DOM 上一样克隆模板并在其上使用选择器。

但是还有一种替代方法来克隆等...但是使用数据，以便我们可以在不使用选择器的情况下设置内容，而是使用变量？

像下面这样，我们只是在添加模板之前声明变量ID？

<template id="my_template">
  <div>
    <h4>Test Titel</h4>
    <div class="row">
      <label for="someinput_${ID}">Stichwort:</label>
      <input id="someinput_${ID}" type="text"/>
    </div>
  </div>
</template>

我知道模板文字是可能的，但我只是好奇这是否也适用于这些方便的模板标签？

是否可以在不使用选择器的情况下在寺庙标签中设置数据？

解决方法

是否可以在不使用扇区的情况下在寺庙标签中设置数据？

不，不是你的意思。（对上面引用的问题的字面量答案是“是”，但这仅仅是因为您可以在不使用选择器的情况下修改 DOM，本身就是通过执行 DOM 遍历你自己。不是一个有用的“是”。 ? )

HTML template 标签没有“使用这些变量求值”方法或类似方法。正如您在问题中所说，您始终可以编写一个使用 JavaScript 模板文字来构建 HTML 的函数（然后使用 insertAdjacentHTML() 或 innerHTML 将其添加到 DOM）。

html-templates javascript