JavaScript（jQuery）を使用してHTMLの新しい要素として要素のレプリカを作成する方法を教えてください。

Question

Fiddle：https://jsfiddle.net/b8fr76cb/

ナビゲーションバーの[新規]ボタンをクリックすると、新しいボックスを効果的に作成したいと考えています。私は、長いHTML文字列を使用しないように推奨オンラインを見て、そのように要素を追加するので、私の限られた知識がある限り、これはget-goからカスタマイズされたボックスを作成することを禁じます。

1. は、現在のボックスのレプリカを作成します（最初からデフォルトのものがありますので、必ず、少なくとも一つがあるでしょう）あたりとしての特性を調整します。私は、このように、二つのオプションを参照してください個々のケース。

2. 私が複製し、個々のケースごとにプロパティを調整する隠された「スケルトン」ボックスがあります。しかし、私はこのオプションが従来のものであるか許可されているものか醜いものか、あるいは他の形容詞であるかどうかはわかりません。

これらのうちどれが良いオプションであるか、より良い、より推奨されるオプションがあるかどうかを教えてください。

はここボックスのHTMLです：

<ul class="list-group box"> 
    <li class="list-group-item text-right box-title-area"> 
    <h4 class="box-name not-selectable">Title</h4> 
    <span class="glyphicon glyphicon-pencil rename-box" aria-hidden="true"></span> 
    </li> 
    <li class="list-group-item rename-box-controls"> 
    <div class="input-group"> 
     <input type="text" class="form-control new-name"> 
     <div class="input-group-btn"> 
     <button type="button" class="btn btn-default confirm-change-name"><span class="glyphicon glyphicon-ok"></span></button> 
     <button type="button" class="btn btn-default cancel-change-name"><span class="glyphicon glyphicon-remove"></span></button> 
     </div> 
    </div> 
    </li> 
    <li class="list-group-item not-selectable"> 
    Entry1 
    <span class="badge">10</span> 
    </li> 
    <li class="list-group-item not-selectable"> 
    Entry2 
    <span class="badge">10</span> 
    </li> 
    <li class="list-group-item not-selectable"> 
    Entry3 
    <span class="badge">10</span> 
    </li> 
    <li class="list-group-item btn-group buttons" role="group"> 
    <button type="button" class="btn btn-success">Button1</button> 
    <button type="button" class="btn btn-primary">Button2</button> 
    <button type="button" class="btn btn-info">Button3</button> 
    </li> 
</ul> 

は、ここで私が完了するために必要なJavaScript関数のスケルトンコードです：あなたはjQuery.clone()機能を使用することができ

$('#new-box').click(function() { 
/* Code to add new box alongside the last one. */ 
}); 

Answer 1

。

var element = $(".myBox").clone(); 
// Do your modifications to the box here. 
$(element).find('.removeThisRow').remove(); // For example remove a row from the box 
$(element).appendTo('#myBoxContainer'); 

これはトリックを行う必要があります。

Answer 2

フィドル作業：あなたは自分の要件を取得するには、簡単な文を使用することができhttps://jsfiddle.net/b8fr76cb/1/

を。 .parent()の

$('#new-box').click(function() { 
    $("#first-row").parent().append('<div class="col-xs-6 col-md-2">'+$("#first-row").html()+"</div>"); 
    }); 

利用は、利用可能なHTMLコードの後に​​htmlタグを作成するために、クローニング要素と.append()の使用を対象とします。