Javascript 如何使用jQuery在单击按钮时附加现有表单

给定一些html，一个名为

InterfacesIx

的表单和一个名为

addInterfacesIx

                <div class="step-new-content white-text">
                    <p class="text-monospace"><small>helps you rollout a configlet about blahblah</small></p>
                    <form name="InterfacesIx">
                    <div class="row">
                        <div class="md-form col-12">
                            <input type="text" name="xxx" class="form-control white-text" placeholder="123"><label for="xxx">asn</label>
                        </div>
                        <div class="md-form col-12">
                            <textarea name="yyy" class="md-textarea form-control white-text" rows="3"></textarea><label for="yyy">notes</label>
                        </div>
                    </div>
                    <br><br><br>
                    </form>
                    <div class="col-12 text-center">
                        <button type="button" name="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
                    </div>
                </div>

当我执行

console.log（$（'InterfacesIx'））时未打印任何内容。选择器错了吗？
在浏览器上检查表单元素时，我得到：


复制属性显示
name=“InterfacesIx”
复制选择器路径显示
#步进导航>li>div.step-new-content.white-text>表单
复制xml显示
/*[@id=“stepper navigation”]/li/div[2]/form

您能告诉我我做错了什么以及如何达到预期的效果吗？
$（'addInterfacesIx'）
和
$（'InterfacesIx'）
都不是有效的选择器。我建议将id/class属性放在相关元素上，然后据此选择它们

我还假设
form
元素应该是兄弟元素，因此尝试使用
insertAfter（）
并将新表单放在DOM中当前的最后一个表单之后。您当前的逻辑将把新表单放在按钮容器中。试试这个：


jQuery（（$）=>{
$（'#addInterfacesIx'）。单击（函数（）{
$（'.interfacesIx:first'）.clone（）.insertAfter（'.interfacesIx:last'）；
});
});

帮助您推出关于blahblah的configlet
asn
笔记




您的选择器
$（'addInterfacesIx'）
无效。如果要按名称获取元素，应该使用属性选择器，类似这样：
$（[form[name='addInterfacesIx']）
。但是，如前所述，按类或ID抓取元素肯定更好。
您混淆了一个事实，即
名称
属性通常不用作jQuery选择器-
名称
属性通常用于键，以便在将值提交到服务器时形成值。您可以使用名称属性选择元素，如下面的代码所示，但首选使用
id
和
class
属性

 <form id="InterfacesIx" name="InterfacesIx">
 ...
 </form>
 <div class="col-12 text-center">
   <button type="button" id="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
 </div>

 <script>
     $(document).ready(() => {

         $('#addInterfacesIx').click(function(){
             // $('#InterfacesIx') is better
             $('[name=InterfacesIx]').clone().insertBefore('addInterfacesIx');
         });
     });
    </script>


...
$（文档）.ready（（）=>{
$（'#addInterfacesIx'）。单击（函数（）{
//$（“#InterfacesIx”）更好
$（'[name=InterfacesIx]'）.clone（）.insertBefore（'addInterfacesIx'）；
});
});
@Rorymcrossan谢谢你，你能提供一个例子吗？请记住提供的jQuery？我在下面为你添加了一个答案！工作@RoryMcCrossan我非常感谢您在这方面的专家帮助
 <form id="InterfacesIx" name="InterfacesIx">
 ...
 </form>
 <div class="col-12 text-center">
   <button type="button" id="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
 </div>

 <script>
     $(document).ready(() => {

         $('#addInterfacesIx').click(function(){
             // $('#InterfacesIx') is better
             $('[name=InterfacesIx]').clone().insertBefore('addInterfacesIx');
         });
     });
    </script>