如何将<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>-elements每个都有一个唯一的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-templates来实现这一点？

编辑:我在这里提供的示例是minified itrw我有一个包含manny元素的模板，这些元素都应该有一个唯一的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); 
    }