JavaScript在单击时生成新的输入字段

我正在制作一个HTML表单，用户可以使用不同的选项。我正在尝试制作一个按钮，该按钮可以无限地生成一组新的输入字段，并在名称中递增，如： 第一个生成的输入的名称应为input1。下一个名称为input2，依此类推

以下是一个可视示例：

---

如何做到这一点

您可以使用jquery获取项的名称

然后可以使用该方法并将“input”替换为“”，以获取最后一项的编号

然后将它增加1。在向其中添加1之前，必须先执行此操作

---

然后使用递增的数字，创建一个新的输入字段并将其添加到容器中。

您可以通过动态创建表单元素并将其附加到

表单

元素来解决此问题

下面是一个简化的示例，只是为了说明主要思想

这里的要点是：

-创建指定的HTML元素（此实例中的表单元素）

-将节点添加到指定父节点（此实例中的表单元素）的子节点列表的末尾

（函数（）{
var计数器=0；
var btn=document.getElementById（'btn'）；
var form=document.getElementById（'form'）；
var addInput=函数（）{
计数器++；
var输入=document.createElement（“输入”）；
input.id='input-'+计数器；
input.type='text'；
input.name='name'；
input.placeholder='输入编号'+计数器；
表单。追加子项（输入）；
};
btn.addEventListener（'click'，function（）{
addInput（）；
}.约束（这个）；
})();
输入{
显示：块；
}

点击我试试这个

HTML



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++;
}

var num=1；
document.getElementById（'add'）.addEventListener（“单击”，addInput）；
函数addInput（）{
var demo=document.getElementById（'demo'）；
demo.insertAdjacentHTML（'beforeend'，'
此代码存在问题。添加新的输入元素后，之前输入的所有值都将被销毁。这可以修复吗？因为除此之外，这正是我need@SkinFlipNetwork如果这段代码不是真的，要使它工作，您必须检索每个输入的值，将它们存储在某个地方并重新填充innerHTMLHTML模板包含input.value。但老实说，我看不出为什么要这样做，相反，我会使用一种更简单的方法，如使用
document.createElement（“输入”）
这是一个清晰且正确的输入。您有什么特殊要求吗？是的。我需要一次创建多个输入。这正是我每次需要复制的输入集：@SkinFlipNetwork我已进行了必要的更改代码不再破坏输入的值，我看不到什么“var模板”是应该做的吗？这仍然不是我想要的。正如我在问题中所说的，我需要创建一组输入，而不仅仅是一个。像Joshua提供的那样的答案将是完美的，除了删除以前的输入数据。@SkinFlipNetwork in function addInput您可以通过使用
document.createElement（）
（在那里可以创建任何类型的DOM元素）正如您在这里看到的，这是每次都需要复制的代码块。如果我要为其中的每个项目创建一个元素，这将花费很长时间。没有没有没有createElement的方法可以工作吗？嗨。我通过稍微修改代码使其工作。我没有使用createElement来进行输入，而是让它创建一个div，我创建了一个divAfterwards更改了的innerHTML，因此它复制了我所需的精确代码行。下面是一个pastebin：欢迎使用so！到目前为止您尝试了什么？
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++;
}