JavaScript：将输入元素添加到当前 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10262393/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript: add input element to current div
提问by Primo? Kralj
I have a javascript function which adds a div with three inputs to the page and a link to add more inputs to the same div (Imagine that user doesn't know how many fields there will be so he can add them dynamically).
我有一个 javascript 函数，它向页面添加一个带有三个输入的 div 和一个向同一个 div 添加更多输入的链接（想象一下，用户不知道会有多少字段，因此他可以动态添加它们）。
var div=document.createElement("div");
div.innerHTML='<input type="text" name="question" /><br><br>'+
'<input type="text" name="input1"/><br />'+
'<input type="text" name="input2"/><br />'+
'<a href="javascript:addInput()">Add input field</a>';
var parent_div=document.getElementById('dinamicni_div');
parent_div.appendChild(div);
How could I now implement this addInput() function to add an input below the last input (currently input2) in the same div (but above the link)?
我现在如何实现这个 addInput() 函数以在同一个 div 中（但在链接上方）的最后一个输入（当前为input2）下方添加一个输入？
Just to make clear - I have two JS functions to generate content dynamically: addDiv(), which you can see above shortened out; and addInput() which I would like to implement and it should add one input in the current div, where the link was clicked.
澄清一下——我有两个 JS 函数来动态生成内容：addDiv()，你可以在上面看到它被缩短了；和 addInput() ，我想实现它，它应该在当前 div 中添加一个输入，在那里点击链接。
采纳答案by Juan Alberto López Cavallotti
You could add a div that contains the input fields inside the div you created, then it would be easy to add new elements to it by appending childs as you did before.
您可以在您创建的 div 中添加一个包含输入字段的 div，然后像以前一样通过附加 childs 来轻松地向其中添加新元素。
回答by Shehzad
Try
尝试
document.getElementById('yourdiveID').innerHTML += "<input type='text' value='' /><br />";
It will add at the end of the div.
它将添加到 div 的末尾。
回答by mindandmedia
give your link a class or id and insert using this method: http://api.jquery.com/insertBefore/
给你的链接一个类或 id 并使用此方法插入：http: //api.jquery.com/insertBefore/
edit:
编辑：
i agree, the question was not about jquery, yet the asker hinted, that his requirements would allow for it, and for completeness sake, here is the code in jquery (to take the posters unjustified intimidation of learning jquery)
我同意，问题与 jquery 无关，但提问者暗示，他的要求是允许的，为了完整起见，这里是 jquery 中的代码（以海报不合理的恐吓学习 jquery）
function createInputMethod(){
return $('<input type="text" name="question" /><br><br>'+
'<input type="text" name="input1"/><br />'+
'<input type="text" name="input2"/><br />');
}
var div = $("<div/>");
div.append(createInputMethod());
div.append($('<a href="javascript:addInput()" id="btn">Add input field</a>');
var parent_div=$('dinamicni_div');
div.appendTo(parent_div);
function addInput(){
createInputMethod().insertBefore("#btn");
}
回答by Anji
I would do something like this. Get all the inputs. Count number of inputs and add using jquery aftermethod. Code is something like this:
我会做这样的事情。获取所有输入。计算输入的数量并使用 jqueryafter方法添加。代码是这样的：
function addInputMethod() {
var len = $('div').find('input').length;
$('input:nth-child(' + len + ')').after('<input type="text" name="input' + (len + 1) +'"/><br />');
}
EDIT
编辑
If you do not have an idfor divyou can change length to this
如果您没有idfordiv您可以将长度更改为此
var len = $(this).parent().find('input').length;
var len = $(this).parent().find('input').length;
Also change the second line to
还将第二行更改为
$(this).parent().find('input:nth-child...
$(this).parent().find('input:nth-child...
