如何将 <template> 与动态 ID 一起使用？

Question

给定一个像这样的 HTML 模板：

<template id="paragraph-template">
<p>Hi, I am a paragraph</p>
</template>

我通过 JS 加载并附加此模板，如下所示：

let templateInstance = document.getElementById("paragraph-template");
myContainer.appendChild(templateInstance)

现在我想多次添加模板（即在 for 循环中）并且我希望每个 <p> 元素都有一个唯一的 ID，所以结果看起来像:

<div>
<p id="p1">Hi, I am a paragraph</p>
<p id="p2">Hi, I am a paragraph</p>
<p id="p3">Hi, I am a paragraph</p>
<div>

如何使用 HTML-模板实现此目的？

编辑：我在此处提供的示例已缩小 - itrw 我有一个包含许多元素的模板，应该都有一个唯一的 ID。

Answer 1

我建议你：

    let templateInstance = document.getElementById("paragraph-template");
    for(var i=1;i<4;i++){
        let clone = document.importNode(templateInstance .content, true);       
        clone.querySelector('p').id = "p"+i;
        myContainer.appendChild(clone); 
    }

如何将 <template> 与动态 ID 一起使用？

How to use <template> with dynamic IDs?

html

javascript

html-templates