2

我有一个 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 中添加一个输入，点击链接。

4

4 回答 4

5

尝试

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

它将添加到 div 的末尾。

于 2012-04-21T19:50:57.607 回答
3

给你的链接一个类或 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");
}
于 2012-04-21T19:50:54.550 回答
1

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

于 2012-04-21T19:49:15.733 回答
1

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

function addInputMethod() {

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


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

编辑

如果您没有idfordiv您可以将长度更改为此

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

还将第二行更改为

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

于 2012-04-21T20:00:35.590 回答