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

Question

我遇到一个问题，匹配的结束标记正在迁移到它的对，而不是按照我列出的语句的顺序包装内容。我不知道这是如何/为什么会发生。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>

Answer 1

我认为这里的问题是对如何 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说明如何获取原始输入，并使用按钮简单地复制它们，而不是每次从头开始创建新的输入。