JQuery клон не показывает, где я ожидал

Question

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

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

, где Cloned 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 *

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