jQuery - .clone()

In jQuery, .clone() is used to create a copy of selected elements. The optional parameter true makes a deep clone including events and data. 

1. Basic .clone()

var copy = $('#myDiv').clone();

  • This creates a shallow clone of the element.

  • Does not copy:

    • Event handlers (.click(), .on(), etc.)

    • jQuery data attached with .data()

2. .clone(true) — Deep Cloning

var copyWithEvents = $('#myDiv').clone(true);

  • Copies everything, including:

    • Child elements (deep copy)

    • Event handlers bound with .on() or .bind()

    • jQuery data associated with the elements

3. Example

<div id="original">Click me</div>

// Add a click handler
$('#original').on('click', function() {
  alert('Original clicked!');
});

// Shallow clone (events not copied)
var shallowClone = $('#original').clone();
$('body').append(shallowClone);

// Deep clone (events copied)
var deepClone = $('#original').clone(true);
$('body').append(deepClone);

  • Clicking shallowClone → nothing happens

  • Clicking deepClone → shows alert because the click handler is copied

Key Notes

  • .clone(true) only clones events and data attached via jQuery, not native DOM properties like checked states or custom JavaScript properties.

  • For nested elements, true ensures that child elements and their events are also cloned.