javascript - 使用JQuery .insertBefore()方法未按给定顺序执行

我有一个问题，匹配的结束标记要迁移到它的配对，而不是按照列出语句的顺序包装内容。我想念这将/为什么发生。
JS函数：

$('.add-contributor-button').click(function(){
 $("<input type=\"text\" name=\"contributor\">").insertBefore('.add-contributor-button');
 $("<select>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"author\">Author</option>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"editor\">Editor</option>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"illustrator\">Illustrator</option>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"translator\">Translator</option>").insertBefore('.add-contributor-button');
  $("<option value=\"\" name=\"other\">Other</option>").insertBefore('.add-contributor-button');
$("</select>").insertBefore('.add-contributor-button');
});

之前的HTML（以及复制的目标是什么）：

<input type="text" name="contributor">
<select>
 <option value="" name="author">Author</option>
 <option value="" name="editor">Editor</option>
 <option value="" name="illustrator">Illustrator</option>
 <option value="" name="translator">Translator</option>
 <option value="" name="other">Other</option>
</select>
<div class="add-contributor-button">+ Add Contributor</div>

单击div后的结果HTML（我是从Firefox 50.1.0检查器工具中获得的）：

<input type="text" name="contributor">
<select>
 <option value="" name="author">Author</option>
 <option value="" name="illustrator">Illustrator</option>
 <option value="" name="translator">Translator</option>
 <option value="" name="other">Other</option>
</select>
<input type="text" name="contributor">
<select></select>
 <option value="" name="author">Author</option>
 <option value="" name="illustrator">Illustrator</option>
 <option value="" name="translator">Translator</option>
 <option value="" name="other">Other</option>
<div class="add-contributor-button">+ Add Contributor</div>

最佳答案

我相信这里的问题是对insertBefore()在jQuery中的工作方式的误解。

insertBefore()不用于构建HTML行。如果您指定一个$("<select>").insertBefore()之类的HTML元素，它将创建一个新的<select>元素并将其添加到您的页面中，并关闭标签和所有标签。

话虽如此，我们可以保留该代码。毕竟，我们确实需要一个新的<select>元素。但是，我们不想插入所有选项，而是要附加它们，这会将它们作为子元素添加到目标元素。

像这样：

$('.add-contributor-button').click(function() {
    $("<input type=\"text\" name=\"contributor\">").insertBefore('.add-contributor-button');
    $("<select>").insertBefore('.add-contributor-button')
        .append("<option value=\"\" name=\"author\">Author</option>")
        .append("<option value=\"\" name=\"editor\">Editor</option>")
        .append("<option value=\"\" name=\"illustrator\">Illustrator</option>")
        .append("<option value=\"\" name=\"translator\">Translator</option>")
        .append("<option value=\"\" name=\"other\">Other</option>");
});

我真的应该注意到，有一些更有效的方法可以做到这一点。我当时正在输入一个，但是zer00ne has posted a good example关于如何获取原始输入并使用按钮来简单地复制它们而不是每次都从头创建新输入的问题。