Jquery Duplicate DIV into Another DIV

The nitty gritty of .clone()

A brief on .clone()

Using jQuery's .clone() function, creates a deep copy of the set of matched elements. This includes all child nodes, text, and attributes (such as classes and IDs). To only clone the elements not the data or events attached to it, use .clone(false). Sounds easy, like CTRL+C and CTRL+V huh!

Cloning and selectors

Be sure that your jQuery selectors are precise enough to directly target the desired DIVs. If the .source class is used elsewhere, consider adding a parent selector or an extra class to pinpoint the exact DIV.

Appending and other methods

The .appendTo() function puts the jQuery object at the end of the target DIV. But if you want more control with the position of the cloned DIV, jQuery provides other handy functions such as .prependTo(), .insertBefore(), and .insertAfter().

Deeper into cloning and more

Exclude specific elements

You could also desire to clone a DIV but exclude certain elements. In this case, use the .not() function:

$('.source').clone().not('.exclude').appendTo('.target');


The result - the cloned DIV will not carry over any elements with the class .exclude.

Cloning multiple DIV elements

Looping through and cloning multiple elements is simple with a .each() loop chained to .clone():

$('.source').each( function() {
  // Meet your identical twin, bro!
  $(this).clone().appendTo('.target');
});


Mindful cloning of form elements

When working with form elements, the unique identifiers and values should be preserved. Clearing the input field values can be done with .val('') chained to the cloned inputs:

$('.source').clone().find(':input').val('').end().appendTo('.target');


Many forms, no data confusion!

Beware of booby traps!

Event handlers

Reattaching event handlers after cloning becomes vital if the original elements had interactions associated with them that should also apply to the clones. This can be achieved by rebinding the events:

$('.source').clone(true).appendTo('.target').on('click.myNamespace', function() {
  // Don't worry! Your click effects follow you.
});


Efficient scripting

Cloning large structures can negatively impact performance. Always optimize your selectors and try to minimize the calls to .clone(), it's kind of like cutting down on unhealthy fast food 😉.

'Sir Unique-a-lot'

Maintaining unique IDs after cloning is crucial for the validity of your page elements. If working with elements having IDs, make sure the cloned elements are assigned new unique IDs.