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

我想有两个文本框每当我点击AddTextBox按钮，我用这个代码来生成一个文本框，它的工作很好

<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>

$（文档）.ready（函数（）{
var计数器=1；
$（“#添加按钮”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
newTextBoxDiv.after（）.html（'answer'+counter+'：'+''）；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
计数器++；
});
});
答复#1:

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

$（文档）。就绪（函数（）{
$(document).ready(function () {
    var counter = 1;

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

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

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

    });

});

var计数器=1；
$（“#添加按钮”）。单击（函数（）{
var newTextBoxDiv=$（document.createElement（'div'））
.attr（“id”，“TextBoxDiv”+计数器）；
var$html='answer_'+counter+'：'+'；
计数器++；
$html+='answer_'+counter+'：'+'；
计数器++；
newTextBoxDiv.after（）.html（$html）；
newTextBoxDiv.appendTo（“#textboxsgroup”）；
});
});

使用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");

                  });



}

用于（变量i=0；i
$（“#添加按钮”）。单击（函数（）{
var计数器=1；
对于（var i=0；i，通过获取click事件的内部工作并将其放入自己的函数中，可以执行以下操作：

HTML

<button id="addButton">Add</button>
<div id='TextBoxesGroup'></div>

添加

JavaScript

var counter = 1;
var labelArray = ["answer", "order"];

$("#addButton").click(function () {
    for(var i = 0; i < labelArray.length; i++){
        createNewInput(labelArray[i]);
    }
    counter++;
});

function createNewInput(label){
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.after().html('<label>'+ label + " " + counter + ' : </label>' + '<input type="text" name="answer_' + counter + '" id="answer_' + counter + '"  value="" >'  );
    newTextBoxDiv.appendTo("#TextBoxesGroup");    
}

var计数器=1；
var labelArray=[“答案”，“顺序”]；
$（“#添加按钮”）。单击（函数（）{
对于（变量i=0；i

试试这个：

  $(document).ready(function(){
     var counter = 1;
       $("#addButton").click(function () {
          var clone1 = $("#TextBoxDiv1").clone();
          clone1.children('input').attr('id',"answer_"+counter)  ;
          clone1.children('input').attr('name',"answer_"+counter);
           $("#TextBoxesGroup").append(clone1);
          counter++;
          var clone2 = $("#TextBoxDiv1").clone();
          clone2.children('input').attr('id',"answer_"+counter)  ;
          clone2.children('input').attr('name',"answer_"+counter);
          $("#TextBoxesGroup").append(clone2);
     });
  });

对不起。我有点困惑。为什么不做两次呢？在单击内写一个for循环..for（var i=0；我尝试使用函数两次，但都不起作用。在这里，每当我单击“添加”按钮时，我希望有两个文本框，一个用于回答，另一个用于顺序。我仍然是jquery和javascript的初学者。我希望有另一个具有不同标签的文本框，我该怎么做？@MSKhan-我已经用我没有的更新了我的答案hink您正在寻找，但有点不清楚您到底想要什么。如果这不正确，并且您有更好的解释，请让我知道，我将尽力帮助您。谢谢=）你的答案几乎和我想要的一样，你更改标签名称的方式我们可以更改此文本框的名称和id属性。这里我想要一个单独的文本框用于回答和顺序。-几乎与我们更改标签实际文本的方式相同，通过使用传递给函数的值。没问题，很高兴这样做！
  $(document).ready(function(){
     var counter = 1;
       $("#addButton").click(function () {
          var clone1 = $("#TextBoxDiv1").clone();
          clone1.children('input').attr('id',"answer_"+counter)  ;
          clone1.children('input').attr('name',"answer_"+counter);
           $("#TextBoxesGroup").append(clone1);
          counter++;
          var clone2 = $("#TextBoxDiv1").clone();
          clone2.children('input').attr('id',"answer_"+counter)  ;
          clone2.children('input').attr('name',"answer_"+counter);
          $("#TextBoxesGroup").append(clone2);
     });
  });