Duplicate a DIV with jQuery (.clone vs .html)

To duplicate a div into another div with jQuery, use .clone() to get a copy of the element and an insertion method like .appendTo() or .html() to place it into the target. For the common case of a popup or preview that mirrors some source content, .clone() is the cleaner choice.

Contents

Starting markup
Option 1 — .clone() (recommended)
Option 2 — .html() (string copy)
Cloning with event handlers
Strip or rewrite ids on the clone
Vanilla JS equivalent
Frequently asked questions
Related guides
References

Last verified: 2026-05-17 with jQuery 3.7. Originally published 2022-10-26, rewritten and updated 2026-05-17.

Starting markup

<div class="content">
    <h1>Title</h1>
    <p>Some Content</p>
</div>

<div class="popup">
    <!-- duplicate goes here -->
</div>

Option 1 — `.clone()` (recommended)

var elem = $('.content').clone();
$('.popup').html(elem);

.clone() returns a duplicate jQuery object that’s detached from the DOM. .html(elem) replaces the inner content of .popup with it, including the outer <div class="content"> wrapper.

jQuery duplicate div — clone vs html, with/without events, deep id handling

Option 2 — `.html()` (string copy)

var elem = $('.content').html();
$('.popup').html(elem);

This copies only the inner markup of .content (the <h1> and <p>, not the wrapping div). Same .html() method is doing two different things here: with no argument it’s a getter that returns a string; with an argument it’s a setter that replaces inner HTML.

Cloning with event handlers

// Shallow clone — copies markup, drops event handlers
$('.content').clone();

// Deep clone — copies jQuery data + events on the cloned element
$('.content').clone(true);

// Deeper still — events on the element AND all its descendants
$('.content').clone(true, true);

Default is structure-only. Pass true when you want a true behavioural copy.

Strip or rewrite ids on the clone

var cloned = $('.content').clone();

// Strip every id from the clone and its descendants
cloned.find('[id]').addBack('[id]').removeAttr('id');

$('.popup').html(cloned);

HTML id attributes must be unique per page. Cloning a subtree that contains ids and inserting it elsewhere will silently duplicate them — labels stop pointing at the right input, CSS rules match more than one element. Strip them or rewrite them with a fresh prefix on the clone.

Vanilla JS equivalent

const source = document.querySelector('.content');
const target = document.querySelector('.popup');

// Element clone
target.innerHTML = '';
target.appendChild(source.cloneNode(true));

// Or: string copy (equivalent of .html())
target.innerHTML = source.innerHTML;

Frequently asked questions

Should I use .clone() or .html() to copy a div?

.clone() returns an element (with all of its descendants, attributes, and optionally its event handlers); .html() returns the inner HTML as a string. If you want a full structural copy with the outer wrapper, use .clone(). If you only need the inner markup re-injected, .html() is fine and slightly cheaper.

Does .clone() copy event handlers too?

Only when you pass true: $('.content').clone(true) includes attached jQuery data and event handlers; $('.content').clone(true, true) also copies handlers on every descendant. Without the argument, only DOM structure and attributes are copied — useful when you want a clean copy that won’t fire stale handlers.

How do I avoid duplicate id attributes when cloning?

id values must be unique per page. After cloning, walk the new tree and either strip ids (cloned.find('[id]').addBack('[id]').removeAttr('id')) or rewrite them to a fresh prefix. Forgetting this is a common cause of subtle bugs — labels stop linking to the right input, CSS rules match more than one element, etc.

Is there a vanilla JS equivalent?

Yes: node.cloneNode(true) clones the element with all descendants, and target.append(clone) inserts it. target.innerHTML = source.innerHTML is the string-copy equivalent of .html(). Both work without jQuery on every modern browser.