jQueryはDIVを別のDIVに複製します

100

DIVを別のDIVにコピーし、これが可能であることを期待して、jqueryの助けが必要です。次のHTMLがあります。

  <div class="container">
  <div class="button"></div>
  </div>

次に、ページの別の場所に別のDIVがあり、 'button' divを次の 'package' divにコピーしたいと思います。

<div class="package">

Place 'button' div in here

</div>

javascript jquery html

— ダン
ソース

163

clone()要素の詳細なコピーを取得するには、メソッドを使用する必要があります。

$(function(){
  var $button = $('.button').clone();
  $('.package').html($button);
});

完全なデモ：http : //jsfiddle.net/3rXjx/

jQuery docsから：

.clone（）メソッドは、一致した要素のセットのディープコピーを実行します。つまり、一致した要素とそのすべての子孫要素およびテキストノードをコピーします。.clone（）は、挿入方法のいずれかと組み合わせて使用すると、ページ上の要素を複製するのに便利です。

— chrx
ソース

1

これは、ユーザーが入力時に追加した値を保持しません。

— wtf8_decode

6

私たちが必要とする理由あなたは私を教えてくださいすることができます$の中でvar $button。私はあなたが単にvarをとして宣言できるjsを信じていますvar button。

— KNU 2015年

20

@KNU必須ではありませんが、jQueryの世界では一般的な規則です。$ button変数がjQueryオブジェクトであることを示しています。stackoverflow.com/questions/205853/…を

— chrx

21

cloneおよびappendTo関数を使用してコードをコピーします。

ここにもjsfiddleの作業例があります

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="copy"><a href="http://brightwaay.com">Here</a> </div>
<br/>
<div id="copied"></div>
<script type="text/javascript">
    $(function(){
        $('#copy').clone().appendTo('#copied');
    });
</script>
</body>
</html>

— サニーSM
ソース

3

このようにdivをコピーできます

$(".package").html($(".button").html())

— JAVAGeek
ソース

2

これをイベントに置く

$(function(){
    $('.package').click(function(){
       var content = $('.container').html();
       $(this).html(content);
    });
});

— ムハンマド・レイル
ソース

0

$(document).ready(function(){  
    $("#btn_clone").click(function(){  
        $("#a_clone").clone().appendTo("#b_clone");  
    });  
});

.container{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery Clone Method</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 


</head>  
<body> 
<div class="container">
<p id="a_clone"><b> This is simple example of clone method.</b></p>  
<p id="b_clone"><b>Note:</b>Click The Below button Click Me</p>  
<button id="btn_clone">Click Me!</button>  
</div> 
</body>  
</html>

スニペットを展開

詳細とデモについて

— 開発者
ソース