JavaScript-如何使用输入字段动态创建多个div

我必须创建3个输入文本框来获取用户输入的姓名和电子邮件地址。 我必须动态地创建它，也就是说，当用户单击电子邮件输入字段时，应该创建三个元素的新行。 这是带有3个输入的一行代码：

<div class='row' id="inputcontainer">
        <div class="form-group clearfix" >
            <div class="col-md-2 col-md-offset-2">
                <div class="form-text-field first-name">
                    <label>First name</label>
                    <input type="text" id="firstName10" class="signup-input" name="" placeholder="">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-text-field last-name">
                    <label>Last name</label>
                    <input type="text" id="lastName0" class="signup-input" name="" placeholder="optional">
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-text-field email">
                    <div>
                    <label>Email</label>
                    <input type="text" data-index="0" id="inputMail0" class="signup-input text-value " name="email[0]"  placeholder="e.g. example@url.com"/>
                    <span class="common-sprite disNone sign-up-cross first"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

---

这和你想要的相似吗

$（document）.on（“模糊”，“添加”，函数（））
{   
$（“#inputcontainer”）。追加（
）；
$（“#inputcontainer”）.append（“名字
”）；
$（“#inputcontainer”）.append（“姓氏
”）；
$（“#inputcontainer”）.append（“电子邮件地址
”）；
});

名字
姓
电子邮件
像这样的东西？我使用
.blur（）
触发动态添加，这样，如果您在电子邮件输入中键入内容并在其外部单击，那么接下来的3行信息将显示出来。我还添加了一些类来帮助jquery更快、更可靠地查找元素。我使用
clone（）
每次重新创建3行的相同结构


$（文档）.ready（函数（）{
$（'.email'）。在（'blur'，function（）上{
如果（$（this.val（）.length>0）{
变量计数=$（'.row'）.length；
控制台日志（计数）；
var clone=$（'#template'）.clone（true.attr（'id'，''）；
clone.find（'.firstName'）.attr（'id'，'firstName'+count）.val（''）；
clone.find（'.lastName'）.attr（'id'，'lastName'+count）.val（''）；
clone.find（'.email'）.attr（'id'，'inputMail'+count）.val（''）；
$（'body'）。追加（克隆）；
}         
});
});

名字
姓
电子邮件
已更新，它动态包含一个表单。我现在正在处理css来整理一下。@saritrotshild现在看看。@Kylet-我想你不明白这个问题。所有3个输入必须在同一行中。如果用户单击电子邮件字段，则必须创建一个包含3个输入的全新行created@saritrotshild已更新。您不应多次使用同一ID，ID用于针对特定元素（其中一个）。问题是，它们必须与我在中创建的同一个类具有相同的类first@saritrotshild是的，那是你不想要的吗？为什么？id必须是唯一的，但类不必是唯一的。我更改了输入的id以便它们是唯一的…如果您希望整行都是唯一的，您可以对行id实现相同的计数。@NDUBITABLE-我正在使用以下代码进行克隆，并将其克隆多次1:@saritrotshild我不明白您想要什么，这使得我的答案不足以帮助您解决动态复制问题。。。
maxIndex = 0;
$('form').on('input','.email',function(){

    $(this).parent().find('.common-sprite').removeClass('disNone');
    var lastmail = $(this);                                                                                  if(($(this).val().length > 0)&&(lastmail.data('index') == maxIndex)) {
        var count = $('.row.inputcontainer').length;
        console.log(count);
        maxIndex++;
        var clone = $('#template').clone(true).attr('id', '');
        clone.find('.firstName[id=firstName'+(maxIndex-1)+']').attr('id', 'firstName' + maxIndex).attr('name', 'first[' + maxIndex +']').addClass('signup-input firstName').val('');
        clone.find('.lastName[id=lastName'+(maxIndex-1)+']').attr('id', 'lastName' + maxIndex).attr('name', 'last[' + maxIndex +']').addClass('signup-input lastName').val('');
        clone.find('.email[id=inputMail'+(maxIndex-1)+']').attr('id', 'inputMail' + maxIndex).attr('name', 'email[' + maxIndex +']').data('index', maxIndex).addClass('signup-input text-value email').val('');
        $('.inputcontainer').append(clone);
    }