jquery之如何使用jQuery动态添加表单元素

这是我的 html:

<div id="extraPerson"> 
    <div class="controls controls-row"> 
      <input class="span3" placeholder="First Name" type="text" name="firstname2"> 
      <input class="span3" placeholder="Last Name" type="text" name="lastname2">      
         <select class="span2" name="gender2"><option value="Male">Male</option><option           value="Female">Female</option></select>    
        ...ETC 
    </div> 
</div> 
 
<a href="#" id="addRow"><i class="icon-plus-sign icon-white"></i> Add another family member</p></a> 

这是我的 jquery:

<script> 
    $(document).ready(function(){ 
        $('#addRow').click(function(){ 
            $("#extraPerson").slideDown(); 
         }); 
    }) 
</script> 

#extraPerson 隐藏在 css 中。

它会在单击链接时添加 div。但是，我希望它在每次单击链接时继续添加相同的 div。我该怎么做呢？如果它将数字附加到表单输入名称，那就更好了。例如 firstname3、firstname4 等

请您参考如下方法:

试试这个方法:-

Demo

HTML

创建一个模板 extraPersonTemplate 并使用它来进一步构建。在您的内容部分添加一个容器。

<div class="extraPersonTemplate"> 
    <div class="controls controls-row"> 
        <input class="span3" placeholder="First Name" type="text" name="firstname2"> 
        <input class="span3" placeholder="Last Name" type="text" name="lastname2"> 
        <select class="span2" name="gender2"> 
            <option value="Male">Male</option> 
            <option value="Female">Female</option> 
        </select> 
    </div> 
</div> 
<div id="container"></div> 

JS

  $(document).ready(function () { 
     $('<div/>', { 
         'class' : 'extraPerson', html: GetHtml() 
     }).appendTo('#container'); //Get the html from template 
     $('#addRow').click(function () { 
           $('<div/>', { 
               'class' : 'extraPerson', html: GetHtml() 
     }).hide().appendTo('#container').slideDown('slow');//Get the html from template and hide and slideDown for transtion. 
 
     }); 
 }) 
 function GetHtml() //Get the template and update the input field names 
{ 
      var len = $('.extraPerson').length; 
    var $html = $('.extraPersonTemplate').clone(); 
    $html.find('[name=firstname]')[0].name="firstname" + len; 
    $html.find('[name=lastname]')[0].name="lastname" + len; 
    $html.find('[name=gender]')[0].name="gender" + len; 
    return $html.html();     
} 

小CSS

.extraPersonTemplate { 
    display:none; 
}