Stack Exchange
Dynamically add some text and text boxes to existing web page
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'
    }
}


What do you mean by captions ? dialogs ? tooltips ? have you got a picture / example site to demonstrate what you want ?

Presumably label text, but I'm not 100% sure on that.

sorry- i meant labels... i just want a label and a text box next to that label...

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>


You can always use a table to make it simple.
$('[id$=yourtable] > tbody:last').append('<input...>Label');

