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，因此结果看起来像例如：< / p>

<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我有一个包含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); 
    }

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

1 个答案: