Javascript 克隆表单，添加新表单

我需要在单击按钮时逐个添加表单，但在第二次单击时，函数会附加多个表单

我在脚本中做错了什么

谢谢

$（'.添加更多btn'）。单击（函数（）{
var clone=$（'.form main'）.clone（'.form block'）；
变量块=$（'.form块'）
$（块）。追加（克隆）；
});

克隆形式
名称
电子邮件

加一
单击按钮时不要克隆。它是克隆在点击时的形式，并且随着每次点击而增加。
相反，在加载时克隆表单并将其存储在变量中。
然后尽可能多地使用它

var clone = $('.form-block').clone();
$('.add-more-btn').click(function() {
  $('.form-main').append(clone);
});

请注意，.clone（）不接受您传递的参数。
另一个带有
html
的解决方案，它复制了第一组元素


var clone=$（'.form main'）.html（）；
$（'.添加更多btn'）。单击（函数（）{
$（'.form main'）.append（克隆）；
});

克隆形式
名称
电子邮件

加一
因为在css类上使用clone方法，每个带有css类
.form block
的div容器都会被克隆。当您使用css类
.form block
添加另一个块时，您将得到两个具有相同类名的块。在下一次单击时，可以克隆两个项目，依此类推

为什么不使用HTML5模板标签呢。使用这种本机类型的模板，您可以归档几个优点。您的表单将更快，因为您不需要加载jQuery库。只需几行本机JavaScript，您就可以归档所需内容。请看下面的示例

<form id="my-form" action="" method="post">

</form>
<button id="add-button">Add</button>
<template id="my-template">
    <div>
        <label>
            <span>Name</span>
            <input type="text" name="name[]" placeholder="your name">
        </label>
    </div>
</template>


添加
名称

这是迄今为止的一个html示例。您可以在此处添加自己的输入元素和样式。这段代码仅用于示例目的

现在是使用一些本地JavaScript的时候了

<script>
    document.getElementById('add-button').addEventListener('click', function(event) {
        var form = document.getElementById('my-form'),
            template = document.getElementById('my-template'),
            clone = document.importNode(template.content, true);

        form.appendChild(clone);
    }, false);

    // to add the first input element automatically
    var event = new Event('click');
    document.getElementById('add-button').dispatchEvent(event);
</script>


document.getElementById（'add-button'）。addEventListener（'click'，函数（事件）{
var form=document.getElementById（'my-form'），
template=document.getElementById（'my-template'），
clone=document.importNode（template.content，true）；
形式。追加子对象（克隆）；
}，假）；
//自动添加第一个输入元素的步骤
var事件=新事件（“单击”）；
document.getElementById（'add-button'）.dispatchEvent（事件）；

这适用于所有现代浏览器。有关html5模板标记及其功能的更多详细信息，请参阅。还可以查看以查看浏览器支持。如您所见，Microsofts Internet Explorer 11不支持模板标记及其功能。因此，当需要IE11支持时，您可以使用一些令人震惊的填充物，如。您想复制
。表单块
，并将其附加到
。

因此，首先正确识别元素。。。要克隆的窗体和元素

然后，从存储的“模板”单击

请注意，您必须克隆“模板”。。。再次点击


var-template=$（“.form-block”）.clone（）；
var form=$（“.form main”）；
$（'.添加更多btn'）。在（'单击'，函数（）上）{
var newFormBlock=template.clone（）；//在此处再次克隆，以便能够多次追加。
form.append（newFormBlock）；
});

克隆形式
名称
电子邮件

加一
clone
函数将所有元素与类
.form main
匹配。因此，第二次添加2，第三次添加4，依此类推。
.clone（）
So
.clone（'.form block'）
是错误的。感谢所有人将一次附加克隆元素。。。然后只“移动”它。必须在单击时调用
.clone（）
方法。并且正在克隆
元素（
.form main
）。它将生成一个嵌套的
，这是无效的。谢谢@LouySpatriceBesette我已经更新了代码以选择表单块并附加到表单。谢谢大家