如何通过jQuery在已添加的输入字段下方新增字段？

嘿，我懂你的困扰——每次点击按钮新增的邮箱输入框都出现在之前添加的字段上方，而不是按顺序排到最后面，对吧？问题出在你一直固定把新元素插入到第一个字段的后面，而不是最后一个已存在的字段后面。

问题原因 #

你当前用的insertAfter("#first_inemail_field")，每次点击都会把新输入框插到固定的#first_inemail_field元素之后。第一次点击后结构是：
#first_inemail_field → 新输入框1
第二次点击时，还是插到#first_inemail_field后面，结构就变成了：
#first_inemail_field → 新输入框2 → 新输入框1
所以新的字段自然就跑到旧的上面去了。

解决方案1：插入到最后一个邮箱字段后面 #

把选择器改成选中最后一个name为emails[]的输入框，这样每次新元素都会插在最后一个已存在的字段后面：

$("#add_email").click(function() { 
    $('<input autocomplete="off" placeholder="Enter email address" type="email" name="emails[]" class="woocommerce-Input input-text">').insertAfter('input[name="emails[]"]:last'); 
});

这里的input[name="emails[]"]:last会精准选中当前所有邮箱输入框里的最后一个，新元素就会按顺序追加到末尾。

解决方案2：用容器统一管理字段（更稳健） #

如果页面上有其他类似的输入框，或者想让结构更清晰，建议给所有邮箱字段加一个容器，直接把新元素追加到容器里：

先修改HTML，添加容器：

<div id="email_fields_container">
    <input id="first_inemail_field" autocomplete="off" placeholder="Enter email address" type="email" name="emails[]" class="woocommerce-Input input-text">
</div>
<button type="button" class="woocommerce-Button button btn btn-success" id="add_email">Add another email</button>

然后修改JS代码，用append()方法添加到容器末尾：

$("#add_email").click(function() { 
    $('#email_fields_container').append('<input autocomplete="off" placeholder="Enter email address" type="email" name="emails[]" class="woocommerce-Input input-text">'); 
});

这种方式逻辑更直观，也能避免因页面其他元素干扰导致的选择器错误。

内容的提问来源于stack exchange，提问作者user10093863