javascript - 如何动态获取两个文本框？

Question

每当我单击 addtextboxes 按钮时，我希望有两个文本框，我使用此代码生成单个文本框并且工作正常。

<script type="text/javascript">
$(document).ready(function () {
    var counter = 1;

    $("#addButton").click(function () {

        var newTextBoxDiv = $(document.createElement('div'))
            .attr("id", 'TextBoxDiv' + counter);

        newTextBoxDiv.after().html('<label>answer_' + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '"  value="" >');
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
    });

});
</script>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>answer #1 : </label><input type='textbox' id='answer1' >
    </div>
</div>

这里我想知道当我点击addbutton时如何有两个文本框？ 任何帮助将不胜感激。

Answer 1

使用 for 循环两次并将代码移动到循环内。

for (var i=0 ;i<=counter ;i++){


var newTextBoxDiv = $(document.createElement('div'))
                       .attr("id", 'TextBoxDiv' + i);

                        newTextBoxDiv.after().html('<label>answer_'+ i+ ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + i+ '"  value="" >'  );
                        newTextBoxDiv.appendTo("#TextBoxesGroup");

                  });



}