我正在制作一个用户有不同选项的 HTML 表单。我正在尝试制作一个按钮，该按钮可以无限生成一个新的集合操作输入字段，名称增加，例如： 第一个生成的输入的名称应为 input1。下一个名称为 input2，依此类推。
这是一个视觉示例：https://webmshare.com/ZBvw0
如何做到这一点？
【问题讨论】：
标签： javascript forms button dynamically-generated
您可以通过动态创建表单元素并将它们附加到 form 元素来解决此问题。
下面是一个简化的例子，只是为了展示主要思想。
这里的要点是：
Document.createElement() - 创建一个指定的 HTML 元素（在此实例中是您的表单元素）。
Node.appendChild() - 将一个节点添加到指定父节点的子节点列表的末尾（在此实例中是您的表单元素）。
(function() {
var counter = 0;
var btn = document.getElementById('btn');
var form = document.getElementById('form');
var addInput = function() {
counter++;
var input = document.createElement("input");
input.id = 'input-' + counter;
input.type = 'text';
input.name = 'name';
input.placeholder = 'Input number ' + counter;
form.appendChild(input);
};
btn.addEventListener('click', function() {
addInput();
}.bind(this));
})();input{
display: block;
}<form id="form" action="">
</form>
<button id="btn" type="button">Click Me!</button>【讨论】：
document.createElement() 添加任何您想要的元素（在那里您可以创建任何类型的 DOM 元素）
您可以使用 jquery 来获取 last 项目的名称。
然后你可以使用javascript string replace方法，将'input'替换为''以获得最后一项的编号。
然后将其加 1。您必须先 parse it as an integer 再将其加 1。
然后使用递增的数字，为您的容器创建一个新的输入字段和append it。
【讨论】：
试试这个
HTML
<div id="demo">
</div>
<input type="button" id="add" value="Add input"/>
Javascript
var num = 1;
document.getElementById('add').addEventListener("click",addInput);
function addInput(){
var demo = document.getElementById('demo');
demo.insertAdjacentHTML('beforeend','<div class="form-holder" style="width: 30%;"><a class="form-label">Billet type</a> <br><select name="ttype'+num+'"><option value="normal">Standard Billet</option><option value="add-on">Tilkøbs Billet</option></select></div><div class="form-holder" style="width: 31%; margin-left: 0.6%;"><a class="form-label">Billet navn</a> <br><input name="tname'+num+'" type="text" placeholder="F.eks. Entré Billet" style="width: 100%;" /></div><div class="form-holder" style="float: right; width: 18%; margin-left: 1%;"><a class="form-label">Antal</a> <br><input name="tquan'+num+'" type="text" placeholder="F.eks. 500" style="width: 100%;" /></div><div class="form-holder" style="float: right; width: 18%;"><a class="form-label">Pris (DKK)</a> <br><input name="tprice'+num+'" type="text" placeholder="F.eks. 100" style="width: 100%;" /></div> <br>');
num++;
}
【讨论】：
document.createElement("input");，这很清楚并且可以正常工作。您有什么特殊要求吗？