使用jQuery创建任意数量的子字段

我正在尝试创建一个包含联系人的表单。可以有任意数量的联系人，每个联系人可以有任意数量的电子邮件和电话号码。我正在使用jQuery创建其他字段，在您添加新联系人并尝试向其中添加任意子字段之前，一切正常。我不知道如何将它们添加到表单中，以便它们与调用该函数的联系人块相关联

下面是我尝试使用的基本HTML，经过简化以显示问题

<div class="contactinfo">
    Contact: <input name="contactname" type="text" /><br />
    <div class="contactemail">
        Email: <input name="contactemail" type="text" /><br />
    </div>
    <a href="javascript:addEmail()">Add Email</a><br />
</div>
<a href="javascript:addContact()">Add Contact</a><br />

联系人：

电子邮件：

下面是jQuery：

function addEmail() {
    var newemail = '<div class="contactemail">' +
        'Email: <input name="contactemail" type="text" /><br />' +
        '</div>';
    $('.contactemail:last').append(newemail);
}

function addContact() {
    var newcontact = '<div class="contactinfo">' +
      'Contact: <input name="contactname" type="text" /><br />' +
      '<div class="contactemail">' +
      'Email: <input name="contactemail" type="text" /><br />' +
      '</div>' +
      '<a href="javascript:addEmail()">Add Email</a><br />' +
      '</div>';
    $('.contactinfo:last').append(newcontact);      
}

函数addEmail（）{
var newemail=''+
'电子邮件：
'+
'';
$（'.contactemail:last'）。追加（newemail）；
}
函数addContact（）{
var newcontact=''+
“联系人：
”+
'' +
'电子邮件：
'+
'' +
“
”+
'';
$（'.contactinfo:last'）。追加（newcontact）；
}

（我知道

：last

不是正确的选择器。）

有没有一种方法可以让我知道哪个联系人块调用了这个函数，以及在哪里附加新的HTML？这完全是错误的做法吗？如果能得到任何意见，我将不胜感激。非常感谢。

放弃“javascript:addEmail（）”而改为这样做（如果我正确理解您的问题）：

HTML

jQuery

$('a.contact').click(function() {
   var newcontact = '<div class="contactinfo">' +
  'Contact: <input name="contactname" type="text" /><br />' +
  '<div class="contactemail">' +
  'Email: <input name="contactemail" type="text" /><br />' +
  '</div>' +
  '<a href="javascript:addEmail()">Add Email</a><br />' +
  '</div>';

   $(this).parents('div.contactinfo').append(newcontact);
});

$（'a.contact'）。单击（函数（）{
var newcontact=''+
“联系人：
”+
'' +
'电子邮件：
'+
'' +
“
”+
'';
$（this）.parents（'div.contactinfo'）.append（newcontact）；
});

我将在javascript中处理单击事件，而不是在html标记中。我还将使用.clone（）生成html。如果需要更改html，最好只在内容中更改，而不在javascript中更改

处理单击事件时，您可以根据“this”关键字知道单击来自何处

addEmail.click(function(){
  $(this); // refers to the element that was clicked
});

一旦有了上下文，就可以在DOM上下移动以设置所需内容

addEmail.click(function(){
  $(this); // refers to the element that was clicked
});