jQuery sao chép DIV thành một DIV khác

100

Cần một số trợ giúp jquery sao chép một DIV vào một DIV khác và hy vọng rằng điều này là có thể. Tôi có HTML sau:

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

Và sau đó tôi có một DIV khác ở vị trí khác trong trang của mình và tôi muốn sao chép div 'button' vào div 'package' sau:

<div class="package">

Place 'button' div in here

</div>

javascript jquery html

— Dan
nguồn

163

Bạn sẽ muốn sử dụng clone()phương pháp này để có được bản sao sâu của phần tử:

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

Bản demo đầy đủ: http://jsfiddle.net/3rXjx/

Từ tài liệu jQuery :

Phương thức .clone () thực hiện một bản sao sâu của tập hợp các phần tử đã so khớp, có nghĩa là nó sao chép các phần tử đã so khớp cũng như tất cả các phần tử con và các nút văn bản của chúng. Khi được sử dụng cùng với một trong các phương thức chèn, .clone () là một cách thuận tiện để sao chép các phần tử trên một trang.

— chrx
nguồn

1

Điều này không giữ các giá trị được thêm bởi người dùng trên đầu vào.

— wtf8_decode

6

bạn có thể vui lòng cho tôi biết lý do tại sao chúng tôi cần $trong var $button. Tôi tin vào js bạn có thể khai báo var một cách đơn giản var button.

— KNU

20

@KNU Nó không cần thiết nhưng đó là quy ước chung trong thế giới jQuery. Nó chỉ ra rằng biến $ button là một đối tượng jQuery. Xem stackoverflow.com/questions/205853/…

— chrx

21

Sao chép mã bằng chức năng clone và appendTo:

Đây cũng là ví dụ làm việc 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>

— Sunny SM
nguồn

3

Bạn có thể sao chép div của mình như thế này

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

— JAVAGeek
nguồn

2

Đưa cái này vào một sự kiện

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

— Muhammad Raheel
nguồn

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>

Mở rộng đoạn mã

Để biết thêm chi tiết và demo

— Nhà phát triển
nguồn