A guide on cloning a div when clicked using jQuery

Question

A guide on cloning a div when clicked using jQuery

I'm looking to clone a div element after it when a button is clicked. I've come across solutions in vanilla JavaScript, but I really need a solution using jQuery as I struggle with it. Can anyone lend a hand?

This is my current setup:

<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>
</div>

This is what I aim for (after the click):

<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>

  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>
</div>

javascript jquery html css

Answer 1

Answer №1

To duplicate the div and add it, utilize the .clone() function to copy the div and .after() method to append it. If you want to copy only one div when using a class, you should use .closest(). Remember to include a boolean parameter in the clone method to ensure all data and event handlers are attached to the cloned element.

$(function(){
  $(".btn-copy").on('click', function(){
    var ele = $(this).closest('.example-2').clone(true);
    $(this).closest('.example-2').after(ele);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>
</div>

Answer 2

To duplicate the div and add it, utilize the .clone() function to copy the div and .after() method to append it. If you want to copy only one div when using a class, you should use .closest(). Remember to include a boolean parameter in the clone method to ensure all data and event handlers are attached to the cloned element.

$(function(){
  $(".btn-copy").on('click', function(){
    var ele = $(this).closest('.example-2').clone(true);
    $(this).closest('.example-2').after(ele);
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy">Copy</button>
  </div>
</div>

Answer 3

Answer №2

recently updated

$(document).ready(function (){
  $('button').click(function (){
        $('.example-1').append($('.example-1').html())
    
        //console.log($('.example-1').html());
    })
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>
<button class="btn-copy">Copy</button>
  </div>
    
</div>

<!--this will only print once-->

Answer 4

recently updated

$(document).ready(function (){
  $('button').click(function (){
        $('.example-1').append($('.example-1').html())
    
        //console.log($('.example-1').html());
    })
  
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>
<button class="btn-copy">Copy</button>
  </div>
    
</div>

<!--this will only print once-->

Answer 5

Answer №3

give this a shot

$('.btn-copy').click(function ()
{
$('.example-1').append($('.example-2').html());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy" >Copy</button>
  </div>
</div>

Answer 6

give this a shot

$('.btn-copy').click(function ()
{
$('.example-1').append($('.example-2').html());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="example-1">
  <div class="example-2"> 
    <p>Example one</p>
    <p>Example two</p>

    <button class="btn-copy" >Copy</button>
  </div>
</div>

Answer 7

Answer №4

If you want to duplicate an element, simply use the clone method. Here's an example:

$(document).on(click,'.btn-copy',function(){
  $(this).parents('.example-1').append($(this).parent().clone());
});

I hope this solution proves useful to you.

Answer 8

If you want to duplicate an element, simply use the clone method. Here's an example:

$(document).on(click,'.btn-copy',function(){
  $(this).parents('.example-1').append($(this).parent().clone());
});

I hope this solution proves useful to you.

Answer 9

Answer №5

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<BODY>
<script>
$( document ).ready(function() {
  $(".btn-copy").click(function(event){
    console.log('You have clicked the button');
    var parentnode=this.parentNode;
    var OuterHtml=parentnode.outerHTML;
    var TopLevel=parentnode.parentNode;
    $(TopLevel).append(OuterHtml);
  });
});
</script>
<div class="example-1">
  <div class="example-2">
    <p>Example uno</p>
    <p>Example dos</p>
    <button class="btn-copy">Copy</button>
  </div>
</div>
</BODY>
</HTML>

Answer 10

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<BODY>
<script>
$( document ).ready(function() {
  $(".btn-copy").click(function(event){
    console.log('You have clicked the button');
    var parentnode=this.parentNode;
    var OuterHtml=parentnode.outerHTML;
    var TopLevel=parentnode.parentNode;
    $(TopLevel).append(OuterHtml);
  });
});
</script>
<div class="example-1">
  <div class="example-2">
    <p>Example uno</p>
    <p>Example dos</p>
    <button class="btn-copy">Copy</button>
  </div>
</div>
</BODY>
</HTML>

A guide on cloning a div when clicked using jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Only one UI-Sref link is functional, while the remaining links are not

Can Bootstrap be utilized by incorporating only specific parts of it?

Container struggling to contain overflowing grid content items

Unable to display the Error 404 Component within a nested Component using React Router

Traversal of a binary tree in the order of visitation specified by the In

Tips for adjusting column sizes in react-mui's DataGrid based on screen size

What is the most effective method for synchronizing data with HTML5 video playback?

The error alert must be displayed directly beneath the specific box

Migrating a Node.js/Mongo application from Redhat Openshift2 to Openshift3: Where can I find the new MongoDB URI?

Update the background image to be smoother, with no text overlay

Unable to adjust the padding of the material UI Select component

The width of the navigation bar adjusts after it becomes fixed to the top of the page

Tips for creating animated clouds that move across the screen using Flash, jQuery, or JavaScript

Can anyone suggest a more efficient approach to handling variations using CSS?

What is the most efficient way to refresh a geometry's topology in ThreeJS?

"Implementing a Redux structure to enhance audio player functionality and effectively manage error

Why are the height and width values I specified not matching the values returned?

Can this layout be achieved using DIV elements?

Issue with opening mobile app from deep link in HTML email

Learn how to dynamically display an image if the original one fails to load by utilizing the image component available in Next.js