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

Question

假设我们有以下 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>

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

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

Answer 1

Is it at all possible to set data in a temple tag without using sectors on it ?

不，不是你说的那样。（文字 对上述问题的回答是“是”，但这只是因为您可以修改 DOM 而无需使用 选择器, 本身 - 通过自己进行 DOM 遍历。不是有用的“是”。 )

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

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

Set HTML template tag content without JavaScript selectors

javascript

html-templates