javascript - 如何使用 with dynamic IDs?
Given a HTML-template like this:
<template id="paragraph-template">
<p>Hi, I am a paragraph</p>
</template>
I load and append this template via JS
问题描述
Given a HTML-template like this:
<template id="paragraph-template">
<p>Hi, I am a paragraph</p>
</template>
I load and append this template via JS, like so:
let templateInstance = document.getElementById("paragraph-template");
myContainer.appendChild(templateInstance)
Now I'd like to add the template multiple times (i.e. in a for-loop) and I want the <p>-elements to each have a unique id, so the result'd look like e.g.:
<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>
How can I achieve this with HTML-templates?
EDIT:
The example I provide here is minified – itrw I have a template with manny elements, wich should all get a unique ID.
I suggest you :
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);
}
解决方案
我建议你 ：
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);
}
推荐阅读
- python - NameError：未定义名称“第一个”我该怎么办？
- angular - 在嵌套的下拉列表中放置项目（Angular 7 Material CDK）
- maven - 默认情况下如何设置共享会话上下文为真
- php - 无法使用 PDO 语句更改 SQL
- python - 从 python/unix 计算文件中的行之间的时间差
- azure - 为使用 Azure 服务的本地解决方案创建整合跟踪/日志的方法
- microsoft-graph-api - 在 Microsoft Graph API 中获取个人帐户的邮箱别名不起作用
- django - 通过代理从本地机器连接到 Can SQL
- android - 关于这里地图的问题
- sql-server - 全文目录未更新
Given a HTML-template like this:
<template id="paragraph-template">
<p>Hi, I am a paragraph</p>
</template>
I load and append this template via JS
问题描述
Given a HTML-template like this:
<template id="paragraph-template">
<p>Hi, I am a paragraph</p>
</template>
I load and append this template via JS, like so:
let templateInstance = document.getElementById("paragraph-template");
myContainer.appendChild(templateInstance)
Now I'd like to add the template multiple times (i.e. in a for-loop) and I want the <p>-elements to each have a unique id, so the result'd look like e.g.:
<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>
How can I achieve this with HTML-templates?
EDIT: The example I provide here is minified – itrw I have a template with manny elements, wich should all get a unique ID.
I suggest you :
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);
}
我建议你 ：
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);
}