jQuery DOM Cloning

Sometimes you need to duplicate an existing DOM element — for example, to add another row to a table, repeat a card template, or copy a form field set. jQuery's .clone() method creates a deep copy of matched elements and all their descendants.

Basic Cloning

Calling .clone() without arguments copies the element and its children but does not copy jQuery event handlers or data. This is the safest default when you just need the markup structure.

Cloning with Events

Pass true as the first argument to also clone all jQuery event handlers and data bound to the element and its descendants: .clone(true). A second true controls whether descendants also receive their handlers — usually you want both.

.clone() — copy markup only
.clone(true) — copy markup and handlers on root element
.clone(true, true) — copy markup and handlers on all descendants too

After cloning, remember to update any id attributes to keep them unique in the document. IDs must be unique for valid HTML and for jQuery selectors to work predictably.

Example

// Clone a card and append to the grid
var $newCard = $('#card-template').clone();
$newCard.removeAttr('id');
$newCard.find('h3').text('New Card Title');
$('#grid').append($newCard);

// Clone with event handlers
$('#add-row-btn').on('click', function () {
    var $lastRow = $('#data-table tbody tr:last').clone(true, true);
    $lastRow.find('input').val(''); // clear values
    $('#data-table tbody').append($lastRow);
});

// Clone a form field and give it a new name
var $field = $('#email-field').clone();
$field.attr('name', 'email2').attr('id', 'email-field-2');
$field.insertAfter('#email-field');

JAVASCRIPT

Full Editor

Pro Tip

After cloning, always update or remove id attributes to avoid duplicate IDs in the document.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned