JavaScript：将输入元素添加到当前 div

Question

我有一个 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);

我现在如何实现这个 addInput() 函数以在同一 div 中的最后一个输入（当前为 input2）下方添加一个输入（但在链接上方）？

澄清一下——我有两个动态生成内容的 JS 函数：addDiv()，你可以在上面看到它被缩短了；和我想实现的 addInput() ，它应该在当前 div 中添加一个输入，点击链接。

Answer 1

试试

document.getElementById('yourdiveID').innerHTML += "<input type='text' value='' /><br />";

它将添加到 div 的末尾。

Answer 2

给你的链接一个类或 id 并使用这个方法插入：http://api.jquery.com/insertBefore/

编辑：

我同意，问题与 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");
}

Answer 3

您可以在您创建的 div 中添加一个包含输入字段的 div，然后像以前一样通过附加子项来轻松添加新元素。

Answer 4

我会做这样的事情。获取所有输入。计算输入数量并使用 jquery after 方法添加。代码是这样的：

function addInputMethod() {

    var len = $('div').find('input').length;


    $('input:nth-child(' + len + ')').after('<input type="text" name="input' + (len + 1) +'"/><br />'); 
}

编辑

如果div 没有id，则可以将长度更改为此

var len = $(this).parent().find('input').length;

同样将第二行改为

$(this).parent().find('input:nth-child...