如何使用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>

外部人物隐藏在css中

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

尝试以下方法：-

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>

---

我想出了自己的解决办法。有很多评论，但请随意提问

$(document).ready(function(){
        $('#addRow').click(function(){
            // get the last person and html html
            var $person = $('.person').last();
            var person = $person.html();
            // find the number
            var index = person.indexOf('firstname');
            var number = parseInt(person.substring(index+9,1));
            var next = number+1;
            // replace the number
            // for firstname
            person.replace('firstname'+number, 'firstname'+next);
            // for lastname
            person.replace('lastname'+number, 'lastname'+next);
            // for gender
            person.replace('gender'+number, 'gender'+next);
            // insert the new person after the last one
            $person.after($('<div class="person">'+person+'</div>'));            
            // get the new person
            var $new = $('.person').last();
            // hide it
            $new.hide();
            // reset the values
            $new.find('input, select').val('');
            // fade it in
            $new.slideDown();
         });
    })

我喜欢@PSL使用模板这一事实，但这可能是一个更好、更简单的解决方案。请注意，您需要添加代码以更新其中的人员编号

小提琴：

---

Pevara和PSL脚本都无法正常工作 所有新行名称/ID都与第一行相同，因此以后无法在脚本中从它们获取值 .子字符串索引+9,1应更正为。子字符串索引+9，索引+10 但是，即使是在$person.html中，也始终是==2；还没有真正改变

以下是3个解决方案选项：

---

extraPerson没有增加任何内容，它已经存在了。您是如何创建其他表单的？使用不同的表单名称更新了答案使用不同的输入名称为每行更新了答案。Hello@PSL，在本例中，如何删除插入的行。

.extraPersonTemplate {
    display:none;
}

$(document).ready(function(){
        $('#addRow').click(function(){
            // get the last person and html html
            var $person = $('.person').last();
            var person = $person.html();
            // find the number
            var index = person.indexOf('firstname');
            var number = parseInt(person.substring(index+9,1));
            var next = number+1;
            // replace the number
            // for firstname
            person.replace('firstname'+number, 'firstname'+next);
            // for lastname
            person.replace('lastname'+number, 'lastname'+next);
            // for gender
            person.replace('gender'+number, 'gender'+next);
            // insert the new person after the last one
            $person.after($('<div class="person">'+person+'</div>'));            
            // get the new person
            var $new = $('.person').last();
            // hide it
            $new.hide();
            // reset the values
            $new.find('input, select').val('');
            // fade it in
            $new.slideDown();
         });
    })