发表新帖
发表新帖

jQuery duplicate DIV into another DIV

后端 未结
关注
5 651
北海茫月
北海茫月 2020-11-29 00:46

Need some jquery help copying a DIV into another DIV and hoping that this is possible. I have the following HTML:

  

  


        

                      

              相关标签:
       

      

      
      

        

          5条回答        


        
    
                         				            
  • 
            
           
            
    
                              
                 
              
              
    
                
                  清酒与你        
                
              
    
                            
    
                2020-11-29 01:20
              
    
            
    
            
    
                                                                       

    You can copy your div like this  
    


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

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  -上瘾入骨i        
                
              
    
                            
    
                2020-11-29 01:22
              
    
            
    
            
    
                                                                       

    

    

    $(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>  
    

    

    

    


    For more detail and demo
    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  一整个雨季        
                
              
    
                            
    
                2020-11-29 01:29
              
    
            
    
            
    
                                                                       

    Put this on an event
    


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

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  旧巷少年郎        
                
              
    
                            
    
                2020-11-29 01:35
              
    
            
    
            
    
                                                                       

    Copy code using clone and appendTo function :
    


    Here is also working example 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>

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
  • 
            
           
            
    
                              
                 
              
              
    
                
                  孤街浪徒        
                
              
    
                            
    
                2020-11-29 01:42
              
    
            
    
            
    
                                                                       

    You'll want to use the clone() method in order to get a deep copy of the element:
    


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

    


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


    From the jQuery docs:
    


    
  
    The .clone() method performs a deep copy of the set of matched
  elements, meaning that it copies the matched elements as well as all
  of their descendant elements and text nodes. When used in conjunction
  with one of the insertion methods, .clone() is a convenient way to
  duplicate elements on a page.
    

    
                                                                        
    
                                                        
    
            
    
            
    
              
                
                0
              
                 
                
               讨论(0)
              
              
                                                   
              
    
                                                            
    
            
    
                      
          
    • 
          	          
                             

        
        

          

            
            

              
              

            
    


                                 
              

            

                          
    

        
         

                
                

                  
                

                

                   看不清?
                

              

                                  

                    
   
                 
             
              
提交回复
热议问题