jqueryクローンが私が期待したところに表示されない

Question

私は入力フィールドを持つフォームを持っていて、クライアントはフィールドの下部にあるボタン「システムを追加」をクリックできます。この関数は、id = "template"のdivをクローンします。ここまでは順調ですね。

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

んだけど、システムの追加ボタンの上tehの非常に最後の項目としてクローン化されたテンプレートを移動されませんし、それを必要とするもの：3クローン化された

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。

あなたはどのがinsertBeforeを持っていないjqueryのを使用しています。

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をclassに変更しました。ある日、あなたに問題が起こるかもしれません。同じID要素を2つ以上持ちます。