jQuery clone не отображается, где я ожидал

Question

У меня есть форма с полями ввода, и клиент может нажать кнопку, расположенную в нижней части поля, «Добавить систему». Эта функция будет клонировать div с id = "template". Все идет нормально.

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

но то, что мне это нужно сделать, это переместить клонированный шаблон как Teh самый последний пункт как раз над кнопкой Добавить систему:

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

Я искал insertBefore, но, по-видимому, этого не существует в JavaScript.

Вы используете JQuery, который делает есть insertBefore.

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

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

Answer 2

Вы можете добавить их непосредственно к #cloned

function Repeat() 
    { 
    var CurrentLi = $('.template').eq(0); 
    CurrentLi.clone().appendTo('#cloned'); 
    } 

fiddle demo *

P.S. я изменил #template на класс. Однажды он может вызвать вас в проблемах - иметь 2+ одинаковых идентификационных элемента