我想克隆模板，并在每次克隆时将其显示给具有不同ID的<div id= "wrapper">。当我按下添加新项目按钮时，每次都会显示一个带有不同“ ID”的新模板。
JavaScript代码：
$("document").ready(function () {
var cloneCntr = 1;
var i = 0;
$("#projectData").on('click', function () {
$('template').children().each(function () {
this.id = this.id+ this.i;
});
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
i++;
$('#wrapper').append(clon);
});
});
HTML代码：
<form id="projectForm">
<div class="container">
////// ---------------------code-------//// <br>
<br>
<h4>Project Experience</h4>
<hr>
<template id="template">
<br>
<br>
<div class="form-row">
---------Template Code-------
</div>
</div>
<hr>
</template>
</div>
<div id="wrapper" class="container">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<div class="container">
<button type="button" id="projectData" class="btn btn-primary">Add New Project</button>
</div>
</body>
</html>
每当我对此进行克隆时，我都希望替换模板中的每个标签“ id”。
您可以使用类似这样的内容。克隆后，您可以先更改元素的属性。
let body = document.getElementById("body")
let temp = document.getElementById("1")
let template2 = temp.cloneNode(true)
template2.id = "2"
body.appendChild(template2)
function showTemp() {
var y = document.getElementById("1")
var z = document.getElementById("2")
var clon = y.content.cloneNode(true);
document.body.appendChild(clon);
clon = y.content.cloneNode(true);
document.body.appendChild(clon);
}
<html>
<div id="body">
<p >Start</p>
<template id="1">
<p>i am goint to get copied</p>
</template>
<button onclick="showTemp()">click me</button>
</div>
</html>这是一个如何为您工作的示例。
在此处查看演示：https://jsfiddle.net/o76pqxyw/
这里是一个屏幕截图，显示了ID的更改方式：https://www.loom.com/share/4a1556c4bb5c4422ad1d4b20a12a638a
<div id="template-form">
<p><label>First Name</label> <input type="text" id="first-name" /></p>
<p><label>Last Name</label> <input type="text" id="last-name" /></p>
</div>
<button id="btn">Add New User</button>
<div id="container"></div>
const button = $('#btn');
const target = $('#container');
let counter = 0;
$(button).on('click', () => {
const template = $('#template-form');
const copy = $(template).clone();
counter++;
const elements = $(copy).find('input');
$(elements).each(function(index) {
const currentId = $(this).attr('id');
const newId = currentId + '-' + counter;
$(this).attr('id', newId);
});
$(target).append(copy);
})