jquery 克隆没有出现在我预期的地方

Question

我有一个带有输入字段的表单，客户可以单击位于该字段底部的按钮“添加系统”。此函数将克隆一个 id="template"的 div。到目前为止，一切都很好。

Existing Form
Existing Form
Existing Form
Cloned 3
Cloned 2
Cloned 1
Add a System Button

但我需要它做的是将克隆的模板移动为“添加系统”按钮上方的最后一项:

Existing Form
Existing Form
Existing Form
Cloned 1
Cloned 2
Cloned 3
Add a System Button

其中“克隆 3”是第三次单击按钮时模板将出现的位置。如果用户添加 20 个系统，按钮和字段甚至不会同时出现在屏幕上。我寻找 insertBefore 但显然 JavaScript 中不存在。

JS 代码:

function AddNewSystem(){    
    alert('Adding new system');
    var CurrentLi = $('.template');
    CurrentLi.clone().insertAfter( $('#cloned') );
}

这是一个jsfiddle看看我在说什么。单击单词模板出现处的“添加系统”按钮，将其更改为 1(或 2 或 3 等)并重复此操作至少 3 次。此时您应该可以看到模板是如何插入的。

有比我正在做的更好的克隆方法吗？

Answer 1

I looked for an insertBefore but apparently that doesn't exists in JavaScript.

您使用的jquery确实有一个insertBefore。

http://api.jquery.com/insertBefore/

function AddNewSystem(){    
    $('#template').clone().insertBefore('#cloned');
}