jQuery .clone() Method

What You’ll Learn

The .clone() method creates a deep copy of matched elements (and their descendants). This tutorial covers basic cloning, cloning with event handlers and data, deep cloning of children’s events, modifying clones before insert, comparisons with move-vs-copy insertion, duplicate id pitfalls, five practical examples, and try-it labs.

Introduction

Apps often need a second copy of a card, list item, or form row — keep the template on the page and duplicate it when the user clicks “Add another.” jQuery’s .clone() builds that copy for you.

Available since jQuery 1.0, .clone() performs a deep copy: the matched elements plus all descendant elements and text nodes. By default, event handlers are not copied. Pass true to include handlers and (since 1.4) element data. Since 1.5, a second Boolean controls whether children also get events and data.

Cloning alone does not insert anything. Chain .appendTo(), .prependTo(), or .insertAfter() to place the copy. Without .clone(), those same methods move existing nodes. Browse the jQuery DOM hub for related methods.

Understanding the .clone() Method

.clone( [withDataAndEvents] [, deepWithDataAndEvents] ) returns a new jQuery collection containing copies of the matched set. The originals stay where they are. Descendants are always included in the structure copy.

The first Boolean (default false) copies event handlers and, since 1.4, data attached with .data(). The second Boolean (since 1.5) defaults to the same value as the first and applies that choice to all children.

📝 Syntax

jQuery .clone() supports two signatures:

Clone structure only — since 1.0

.clone( [withDataAndEvents] )

• withDataAndEvents (default false) — copy event handlers; since 1.4 also copy .data().

Clone with deep events/data — since 1.5

.clone( [withDataAndEvents] [, deepWithDataAndEvents] )

• deepWithDataAndEvents — copy events/data for all children; defaults to the first argument’s value.
• Note: in jQuery 1.5.0 the first-argument default briefly was true; from 1.5.1 onward it is false again.

Return value

• Returns a new jQuery collection of the cloned elements (not yet in the document unless you insert them).
• Chain modifiers like .attr(), .text(), or .appendTo() on the clone.

Official clone patterns

$( "b" ).clone().prependTo( "p" );

$( ".hello" ).clone().appendTo( ".goodbye" );

Examples Gallery

Examples follow the official jQuery API patterns and common production workflows. Use View Output or Try It Yourself to explore each case.

$( "b" ).clone().prependTo( "p" );

Original <b> remains in place
A copy is prepended inside each <p>

Deep copy includes text inside <b>

// Moves .hello into .goodbye (original location empty)
$( ".hello" ).appendTo( ".goodbye" );

// Keeps original .hello and adds a copy inside .goodbye
$( ".hello" ).clone().appendTo( ".goodbye" );

Move: Hello appears only under Goodbye
Clone: Hello appears in both places

Always clone when you need a duplicate, not a relocate

$( "#add" ).on( "click", function() {
  $( ".row" ).first()
    .clone( true )
    .find( "input" ).val( "" ).end()
    .appendTo( "#rows" );
});

New .row appears with the same click handlers
Input value cleared on the clone only

.clone(true) copies handlers + .data() on the matched element

var $copy = $( "#card-template" )
  .clone()
  .removeAttr( "id" )
  .removeClass( "is-template" )
  .find( "h3" ).text( "Cloned card" ).end();

$copy.appendTo( "#board" );

Template keeps id="card-template"
Clone has no id, updated heading, appended to #board

Safe pattern for reusable UI templates

// Copy widget + child button handlers/data
var $dup = $( "#widget" ).clone( true, true );
$dup.attr( "id", "widget-copy" ).appendTo( "#stage" );

Widget structure duplicated
Nested button click still fires on the copy
New id avoids duplicate #widget

🚀 Common Use Cases

• Dynamic form rows — clone a field group when the user adds another item.
• Card / widget templates — keep a hidden template and clone it into a board.
• List duplication — copy a selected item instead of rebuilding HTML strings.
• Demo / preview panes — show a read-only clone of a live component.
• Preserving interactivity — .clone(true) or .clone(true, true) for widgets with handlers.
• Safer than string HTML — clone existing trusted markup instead of concatenating HTML from data.

📝 Notes

• Available since jQuery 1.0; second parameter since 1.5; data copied with events since 1.4.
• Always a deep structural copy of descendants — there is no “shallow element only” mode.
• Default does not copy event handlers; use .clone(true) or .clone(true, true).
• Objects and arrays in .data() are shared between original and clone unless you deep-copy them.
• Duplicated id attributes are invalid HTML — rewrite or remove them on clones.
• textarea typed values and select selections are not copied for performance; input dynamic state generally is.
• Event delegation on a stable parent often beats deep-cloning handlers for repeating UI.

💡 Best Practices