.clone()?.clone() creates a deep copy of matched elements (and their descendants) since jQuery 1.0. The original stays in place — chain .appendTo() or similar to insert the copy.
$(".hello").clone().appendTo(".goodbye") // copy, then insert
$(".hello").appendTo(".goodbye") // moves — original leaves
.clone() // structure only (default)
.clone(true) // + events and .data() (1.4+)
.clone(true, true) // + events/data on children (1.5+)| Need | Use |
|---|---|
| Duplicate markup | $(el).clone().appendTo(target) |
| Copy with click handlers | $(el).clone(true) |
| Copy events on children too | $(el).clone(true, true) |
| Move (no copy) | $(target).append($(el)) |
.clone()Copy first, optionally tweak the clone, then insert it.
.clone() or .clone(true) / .clone(true, true) as needed.id) on the clone..appendTo(), .prependTo(), .insertAfter(), etc.| Piece | Required? | Role |
|---|---|---|
| Matched set | Yes | Element(s) to deep-copy |
withDataAndEvents | Optional | Copy events + .data() (default false) |
deepWithDataAndEvents | Optional | Same for descendants (1.5+; defaults to first arg) |
| Return | — | New jQuery set of cloned elements |
for each matched element el:
copy = deep_copy(el and all descendants)
if withDataAndEvents:
copy events and .data() on el
// note: object/array data values stay shared
if deepWithDataAndEvents:
copy events and .data() on descendants too
add copy to result set
return result set // original DOM unchanged until you insertKeep these facts handy while duplicating nodes.
| Topic | Detail |
|---|---|
| Syntax | .clone([withDataAndEvents][, deepWithDataAndEvents]) |
| Since | 1.0; data+events 1.4; deep flag 1.5 |
| Default | Structure only — no events/data |
| vs move | Clone keeps original; plain append moves |
| IDs | Copied — make unique after clone |
| Form state | input kept; textarea/select often not |
| Data objects | Shared references unless you deep-copy |
Clone #card into #tray — or move it without cloning.
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Copy bold text and prepend the clones into paragraphs.
$("b").clone().prependTo("p");$("b") finds every bold element..clone() deep-copies those nodes (structure only)..prependTo("p") puts each copy at the start of every paragraph.<b> elements remain where they were.Same insertion API — with and without .clone().
$(".hello").clone().appendTo(".goodbye"); // copy
// $(".hello").appendTo(".goodbye"); // would move insteadPass true so click handlers come along.
$("#btn").on("click", function () {
$("#out").text("clicked");
});
$("#btn").clone(true).appendTo("#tray");
// clone(true) keeps the click handler#btn..data().#tray..clone(true, true) if nested handlers must copy too.id After CloneChange the clone’s id before putting it in the document.
$("#card")
.clone()
.attr("id", "card-2")
.appendTo("#tray");id — are copied..attr("id", "card-2") makes the copy unique.Check these before relying on .clone() in production.
Always rename cloned ids (and related for / ARIA hooks) before insert.
.clone(true)Default clones look the same but do not fire the original handlers. Pass true (and the deep flag when needed).
.data() is sharedArrays/objects in .data() are not deep-copied. Clone them manually if originals must stay independent.
Typed input values usually copy; textarea text and select choices often do not — re-apply if required.
.clone() has been part of jQuery since 1.0. Copying events/data arrived in 1.4; deepWithDataAndEvents arrived in 1.5 (default false again from 1.5.1).
Supported in all browsers that run jQuery 1.0+. Prefer a current jQuery 3.x build for modern projects.
Bottom line: Safe for any project that already loads jQuery. Use .clone(true) when handlers must travel with the copy.
| Approach | Cost | Best for |
|---|---|---|
.clone() | Deep DOM copy | Small/medium widgets |
.clone(true, true) | Heavier | Trees with nested handlers |
Build with $("<div>") | Often cheaper | Many identical rows from data |
Cloning large subtrees repeatedly is expensive. For big lists, prefer a template string or a DocumentFragment instead of cloning a live node hundreds of times.
.appendTo() / .insertAfter() on the clone..clone(true) (and deep flag for children).One line: .clone() duplicates nodes so you can insert copies without moving the original.
Insert matched elements after a target with content-first syntax.
9 people found this page helpful