jQuery, DIV'yi başka bir DIV'ye kopyaladı

101

Bir DIV'yi başka bir DIV'ye kopyalamak için jquery yardımına ihtiyacınız var ve bunun mümkün olduğunu umuyoruz. Aşağıdaki HTML'ye sahibim:

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

Ve sonra sayfamın başka bir yerinde başka bir DIV var ve 'button' div'i aşağıdaki 'paket' div'e kopyalamak istiyorum:

<div class="package">

Place 'button' div in here

</div>

javascript jquery html

— Dan
kaynak

164

clone()Öğenin derin bir kopyasını elde etmek için yöntemi kullanmak isteyeceksiniz :

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

Tam demo: http://jsfiddle.net/3rXjx/

Gönderen jQuery docs :

.Clone () yöntemi, eşleşen öğeler kümesinin derin bir kopyasını gerçekleştirir, yani eşleşen öğelerin yanı sıra tüm alt öğelerini ve metin düğümlerini kopyalar. Ekleme yöntemlerinden biriyle birlikte kullanıldığında, .clone () bir sayfadaki öğeleri çoğaltmanın uygun bir yoludur.

— chrx
kaynak

1

Bu, kullanıcı tarafından eklenen değerleri girdilerde tutmaz.

— wtf8_decode

6

İhtiyacımız neden bana söyler misin $içinde var $button. Js'ye var'ı basitçe olarak bildirebileceğinizi düşünüyorum var button.

— KNU

20

@KNU Gerekli değil ama jQuery dünyasında yaygın bir kongredir. $ Button değişkeninin bir jQuery nesnesi olduğunu belirtir. GörmekStackoverflow.com/questions/205853/… sayfasına

— chrx

21

Clone ve appendTo işlevini kullanarak kodu kopyalayın:

İşte aynı zamanda çalışma örneği 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>

— Güneşli SM
kaynak

3

Div'inizi bu şekilde kopyalayabilirsiniz

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

— JAVAGeek
kaynak

2

Bunu bir etkinliğe koy

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

— Muhammed Raheel
kaynak

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>

Snippet'i genişlet

Daha fazla ayrıntı ve demo için

— Geliştirici
kaynak