javascript - 如何将 <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 模板实现此目的？

编辑: 我在这里提供的示例是缩小的 – 在现实世界中，我有一个包含许多元素的模板，这些元素都应该有一个唯一的 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); 
    }