jQuery एक और DIV में DIV की नकल करता है

100

कुछ jquery को एक DIV को दूसरे DIV में कॉपी करने में मदद चाहिए और उम्मीद है कि यह संभव है। मेरे पास निम्न HTML है:

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

और फिर मेरे पेज में एक और स्थान पर एक और DIV है और मैं निम्नलिखित 'पैकेज' पेज में 'बटन' 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 डॉक्स :

.Clone () विधि मिलान किए गए तत्वों के सेट की एक गहरी प्रतिलिपि निष्पादित करती है, जिसका अर्थ है कि यह मिलान किए गए तत्वों के साथ-साथ उनके सभी मूल तत्वों और पाठ नोड्स की भी प्रतिलिपि बनाता है। जब सम्मिलन विधियों में से एक के साथ संयोजन में उपयोग किया जाता है, तो .clone () एक पृष्ठ पर तत्वों की नकल करने का एक सुविधाजनक तरीका है।

— chrx
स्रोत

1

यह इनपुट पर उपयोगकर्ता द्वारा जोड़े गए मानों को नहीं रखता है।

— wtf8_decode

6

क्या आप मुझे बता सकते हैं कि हमें इसकी आवश्यकता क्यों $है var $button। मुझे विश्वास है कि js में आप बस के रूप में var घोषित कर सकते हैं var button।

— केएनयू

20

@KNU यह आवश्यक नहीं है, लेकिन यह jQuery की दुनिया में एक आम सम्मेलन है। यह इंगित करता है कि $ बटन चर एक jQuery वस्तु है। देखें stackoverflow.com/questions/205853/...

— chrx

21

क्लोन और ऐपेंडो फ़ंक्शन का उपयोग करके कॉपी कोड:

यहाँ भी 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>

— सनी एस.एम.
स्रोत

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>

स्निपेट का विस्तार करें

अधिक विवरण और डेमो के लिए

— डेवलपर
स्रोत