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，然后通过像以前一样附加childs来添加新元素很容易。

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 />'); 
}

修改

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

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

同时将第二行更改为

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

JavaScript：将input元素添加到当前div

4 个答案: