动态地将一些文本和文本框添加到现有网页

Question

I am trying to create a number of text boxes with specific captions in front of each text box, dynamically.

I want the actual jquery code to create the textboxes and labels to lie within the following for loop---

function addelements(){

    jQuery('<form action="test" id="data-form" name="data-form" method="POST" onsubmit="senddatafinal();">  <p> This is a new form </p><br />First name: <input type="text" name="firstname" /><br />Last name: <input type="text" name="lastname" />').appendTo('body');
    for(i=0; i<=3; i++)
    {      
         textmessage= "This is element # " + (i+1);
         fieldname= "field_" + (i+1);
     //now add code to show label stored in 'textmessage' 
     //to the form 'data-form'
     //now add code to show text box with name stored in 'fieldname' 
     //to the form 'data-form'
    }
}

Answer 1

您始终可以使用表格使其变得简单。

$('[id$=yourtable] > tbody:last').append('<input...>Label');

Answer 2

Found the below code (slightly modified it for my requirements) at http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

Code----

<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>Textbox #'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });
});
</script>