Cloning DOM Elements
clone() creates a copy of a selected element.
Syntax
var copy = $(selector).clone();
var deepCopy = $(selector).clone(true);Basic clone()
The basic clone() method creates a deep copy of the selected element and its descendants, without copying any attached event handlers. The copy is a completely independent element until you insert it somewhere in the DOM.
Example: Basic clone()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
#box { background:steelblue; color:#1a1a1a; padding:10px; border-radius:4px; display:inline-block; margin:10px 0; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="box">Original</div>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
var $initial = $("body").children();
$("#runBtn").click(function() {
const $copy = $("#box").clone();
$("body").append($copy);
});
$("#resetBtn").click(function() {
$("body").children().not($initial).remove();
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Clone Multiple Elements
clone() can copy an entire collection of matching elements at once, not just a single one, producing a parallel set of independent copies. Each clone is separate, so modifying one afterward doesn't affect the others.
Example: Clone Multiple Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<p class="item">One</p><p class="item">Two</p>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
var $initial = $("body").children();
$("#runBtn").click(function() {
const $copies = $(".item").clone();
$("body").append($copies);
});
$("#resetBtn").click(function() {
$("body").children().not($initial).remove();
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Clone with Events
Pass true to clone() to also copy any event handlers and jQuery data bound to the original element, not just its markup. Without that argument, a cloned button would look identical but wouldn't respond to clicks the same way.
Example: Clone with Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<button id="btn">Click</button>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
var $initial = $("body").children();
$("#runBtn").click(function() {
$("#btn").on("click", function() { $("#output").text("Clicked"); });
const $copy = $("#btn").clone(true);
$("body").append($copy);
});
$("#resetBtn").click(function() {
$("body").children().not($initial).remove();
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Clone and Modify
After cloning, you can freely change the copy's text, attributes, or classes without changing the original element at all, since the two are now entirely separate DOM nodes. This is a common way to duplicate a template element and customize each copy.
Example: Clone and Modify
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<div id="template">Template</div>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
var $initial = $("body").children();
$("#runBtn").click(function() {
const $copy = $("#template").clone();
$copy.text("Modified copy").attr("id", "copy1");
$("body").append($copy);
});
$("#resetBtn").click(function() {
$("body").children().not($initial).remove();
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Clone Forms
Cloning can also duplicate simple form controls like inputs and selects, though care is needed since cloned inputs usually keep the same name and id as the original, which you'll want to change to avoid duplicate identifiers on the page.
Example: Clone Forms
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<input id="field1" name="field1" value="Original">
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
var $initial = $("body").children();
$("#runBtn").click(function() {
const $copy = $("#field1").clone();
$copy.attr("id", "field2").attr("name", "field2");
$("body").append($copy);
});
$("#resetBtn").click(function() {
$("body").children().not($initial).remove();
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Cloning an element with an
idand appending the copy, which creates duplicate ids in the page. - Expecting
.clone()to copy click handlers, when you need.clone(true)for them. - Calling
.clone()and forgetting to insert the copy, as in$("#box").clone();, since the clone is not in the document until you append it.
Chapter Summary
- jQuery gets and sets text, HTML, and values of elements, and reads and changes attributes and properties.
- You can insert content inside or outside elements, and remove, detach, or replace them.
- Wrapping, unwrapping, and cloning elements restructure the DOM.
🔒
Chapter Quiz — Complete all 9 topics to unlock
0/9 topics done
Complete these topics first: