Javascript 使用JQuery.insertBefore（）方法是'；t按照给定的顺序执行

我有一个问题，匹配的结束标记迁移到它的对，而不是按照我列出的语句的顺序包装内容。我不知道这是怎么发生的。 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');
});

$（'.addcontributor按钮'）。单击（函数（）{
$（“”）.insertBefore（'.addcontributor按钮'）；
$（“”）.insertBefore（'.addcontributor按钮'）；
$（“作者”）.insertBefore（'.addcontributor按钮'）；
$（“编辑器”）.insertBefore（'.addcontributor按钮'）；
$（“Illustrator”）.insertBefore（'.addcontributor按钮'）；
$（“转换器”）.insertBefore（'.addcontributor按钮'）；
$（“其他”）.insertBefore（'.addcontributor按钮'）；
$（“”）.insertBefore（'.addcontributor按钮'）；
});

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

作者
编辑
插图画家
翻译
其他
+添加贡献者

单击div后生成的HTML（我从Firefox 50.1.0 inspector工具获得）：

作者
插图画家
翻译
其他
作者
插图画家
翻译
其他
+添加贡献者

我认为这里的问题是对

insertBefore（）

在jQuery中如何工作的误解

insertBefore（）

不用于生成HTML行。如果指定一个HTML元素，如

$（“”）.insertBefore（）

，它将创建一个新的

元素，并将其添加到页面、关闭标记和所有内容中

也就是说，我们可以保留代码。毕竟，我们确实需要一个新的

元素。但是，我们不想插入所有选项，而是希望附加它们，将它们作为子元素添加到目标元素中

像这样：

$('.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>");
});

$（'.addcontributor按钮'）。单击（函数（）{
$（“”）.insertBefore（'.addcontributor按钮'）；
$（“”）。插入之前（“.add contributor”按钮）
.append（“作者”）
.append（“编辑”）
.append（“Illustrator”）
.append（“译者”）
.附加（“其他”）；
});

---

---

我真的应该注意到，有一些更有效的方法可以做到这一点。我正在输入一个，但是如何获取原始输入，并使用按钮简单地复制它们，而不是每次从头开始创建新输入。

我认为这里的问题是对

insertBefore（）

在jQuery中如何工作的误解

insertBefore（）

不用于生成HTML行。如果指定一个HTML元素，如

$（“”）.insertBefore（）

，它将创建一个新的

元素，并将其添加到页面、关闭标记和所有内容中

也就是说，我们可以保留代码。毕竟，我们确实需要一个新的

元素。但是，我们不想插入所有选项，而是希望附加它们，将它们作为子元素添加到目标元素中

像这样：

$('.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>");
});

$（'.addcontributor按钮'）。单击（函数（）{
$（“”）.insertBefore（'.addcontributor按钮'）；
$（“”）。插入之前（“.add contributor”按钮）
.append（“作者”）
.append（“编辑”）
.append（“Illustrator”）
.append（“译者”）
.附加（“其他”）；
});

---

---

我真的应该注意到，有一些更有效的方法可以做到这一点。我当时正在输入一个，但我想知道如何获取原始输入，并使用按钮简单地复制它们，而不是每次从头开始创建新输入。

省去一些麻烦，将

和

包装在一个容器中（我使用了

），然后

.clone（）

将其复制

片段

$（'.addcontributor按钮'）。单击（函数（）{
var clone=$（'.original'）.clone（true，true）；
clone.removeClass（'original'）.addClass（'clone'）.insertBefore（'addcontributor按钮'）；
});

作者
编辑
插图画家
翻译
其他
+添加贡献者
省去一些麻烦，将
和
包装在一个容器中（我使用了
），然后
.clone（）
将其保存

片段


$（'.addcontributor按钮'）。单击（函数（）{
var clone=$（'.original'）.clone（true，true）；
clone.removeClass（'original'）.addClass（'clone'）.insertBefore（'addcontributor按钮'）；
});

作者
编辑
插图画家
翻译
其他
+添加贡献者
这100%有效，感谢你对我所做的事情的澄清。这100%有效，感谢你对我所做的事情的澄清。我正在我的答案中键入类似的内容，但我更喜欢你的方法。我会引用你的+1我对你在分析这堆乱七八糟的东西时表现出的坚韧不拔表示赞赏。我正在我的答案中键入类似的内容，但无论如何，我更喜欢你的方法。我会引用你的+1我对你在分析这场混乱中的坚韧不拔表示赞赏。
$('.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>");
});