jQuery menduplikasi DIV ke DIV lain

100

Butuh bantuan jquery untuk menyalin DIV ke DIV lain dan berharap ini mungkin. Saya memiliki HTML berikut:

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

Dan kemudian saya memiliki DIV lain di lokasi lain di halaman saya dan saya ingin menyalin div 'tombol' ke div 'paket' berikut:

<div class="package">

Place 'button' div in here

</div>

javascript jquery html

— Dan
sumber

163

Anda akan ingin menggunakan clone()metode ini untuk mendapatkan salinan elemen yang mendalam:

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

Demo lengkap: http://jsfiddle.net/3rXjx/

Dari dokumen jQuery :

Metode .clone () melakukan salinan dalam dari kumpulan elemen yang cocok, artinya metode ini menyalin elemen yang cocok serta semua elemen turunan dan node teksnya. Saat digunakan bersama dengan salah satu metode penyisipan, .clone () adalah cara mudah untuk menduplikasi elemen di halaman.

— chrx
sumber

1

Ini tidak menjaga nilai yang ditambahkan oleh pengguna pada input.

— wtf8_decode

6

bisakah Anda memberi tahu saya mengapa kita perlu $masuk var $button. Saya percaya pada js Anda dapat mendeklarasikan var sebagai var button.

— KNU

20

@KNU Ini tidak perlu tetapi ini adalah konvensi umum di dunia jQuery. Ini menunjukkan bahwa variabel $ button adalah objek jQuery. Lihat stackoverflow.com/questions/205853/…

— chrx

21

Salin kode menggunakan fungsi clone dan appendTo:

Berikut ini juga contoh kerja 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 cerah
sumber

3

Anda dapat menyalin div Anda seperti ini

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

— JAVAGeek
sumber

2

Taruh ini di acara

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

— Muhammad Raheel
sumber

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>

Luaskan cuplikan

Untuk lebih detail dan demo

— Pengembang
sumber