jQuery Element Creation and Cloning — Complete DOM Building Guide
In this tutorial, you will learn about jquery element creation and cloning. We cover key concepts, practical examples, and best practices to help you master this topic.
jQuery element creation and cloning lets you generate new DOM elements programmatically, duplicate existing elements with or without their data and event handlers, and build complex DOM structures efficiently.
What You'll Learn
- Creating elements with $() syntax
- Setting properties during creation
- Cloning elements with .clone()
- Controlling clone depth (data, events)
- Performance best practices for DOM creation
Why It Matters
Dynamic web applications constantly create, duplicate, and insert elements. Efficient element creation and cloning directly impacts page performance and interactivity, especially in lists, galleries, and generated forms.
Real-World Use
A photo gallery that clones a template thumbnail for each image, a dynamic form Builder that creates input groups from a configuration array, and a chat application that creates message elements from Websocket data.
Element Creation Flow
flowchart LR
A[$('')] --> B[Create Document Fragment]
A --> C[Set Attributes & Content]
C --> D[Append to DOM]
E[$existing.clone()] --> F[Copy Element Tree]
F --> G[Modify Copy]
G --> D
style A fill:#e6f3ff,stroke:#4a90d9,stroke-width:2px
Creating Elements
// Create a simple element
var $div = $('<div>');
// Create with content
var $paragraph = $('<p>Hello, World!</p>');
// Create with attributes
var $link = $('<a>', {
href: 'https://example.com',
text: 'Visit Example',
class: 'external-link',
target: '_blank',
'data-id': 42
});
// Create complex nested structure
var $card = $('<div>', { class: 'card' }).append(
$('<img>', { src: 'photo.jpg', class: 'card-img' }),
$('<div>', { class: 'card-body' }).append(
$('<h3>', { text: 'Card Title' }),
$('<p>', { text: 'Card description text.' })
)
);
// Append to the DOM
$('#container').append($card);
Expected output: The created element is a proper DOM node with all attributes, classes, and content. It exists in memory until appended to the document.
Element Creation with HTML String
// Simple HTML string
var $item = $('<li class="list-item" data-id="5">Item 5</li>');
// Complex HTML (use template literals for readability)
var html = `
<div class="product-card">
<img src="product.jpg" alt="Product">
<div class="info">
<h3>Product Name</h3>
<p class="price">$29.99</p>
<button class="add-to-cart">Add to Cart</button>
</div>
</div>
`;
var $product = $(html);
// Append to target
$('.grid').append($product);
Creating from Templates
<!-- Hidden template in HTML -->
<script type="text/template" id="user-template">
<div class="user-card">
<img class="avatar" src="" alt="">
<div class="user-info">
<h3 class="name"></h3>
<p class="email"></p>
</div>
</div>
</script>
function createUserCard(user) {
// Clone the template
var $card = $('#user-template').html();
// Create jQuery object and fill data
var $el = $($card);
$el.find('.avatar').attr('src', user.avatar);
$el.find('.name').text(user.name);
$el.find('.email').text(user.email);
$el.attr('data-user-id', user.id);
return $el;
}
// Usage
var users = [
{ id: 1, name: 'Alice', email: 'alice@example.com', avatar: '/avatars/a.jpg' },
{ id: 2, name: 'Bob', email: 'bob@example.com', avatar: '/avatars/b.jpg' }
];
users.forEach(function(user) {
$('.user-list').append(createUserCard(user));
});
Cloning Elements
// Shallow clone (element only, no children)
var $clone = $('.item:first').clone(false);
// Deep clone (element + children, no data/events)
var $deepClone = $('.card').clone();
// Deep clone with data and events
var $fullClone = $('.card').clone(true); // Clone with data
var $fullCloneWithEvents = $('.card').clone(true, true); // Clone data + events
Expected output: .clone(true, true) creates a complete independent copy with all nested elements, their data, and event handlers. The original and clone are fully independent.
Cloning Example
// Shopping cart item cloning
$('.product-card .add-to-cart').click(function() {
var $product = $(this).closest('.product-card');
// Clone the product (without events to keep it clean)
var $cartItem = $product.clone();
// Modify the clone for cart display
$cartItem
.removeClass('product-card')
.addClass('cart-item')
.find('.add-to-cart')
.remove()
.end()
.append('<button class="remove-btn">Remove</button>');
// Add quantity input
$cartItem.prepend('<input type="number" value="1" min="1" class="qty">');
$('#cart').append($cartItem);
});
Performance: Batch Creation
// BAD: Multiple DOM insertions (slow)
for (var i = 0; i < 100; i++) {
$('.list').append('<li>Item ' + i + '</li>');
}
// GOOD: Build fragment, single insertion
var items = [];
for (var i = 0; i < 100; i++) {
items.push('<li>Item ' + i + '</li>');
}
$('.list').append(items.join(''));
// BEST: Build fragment with jQuery objects
var $fragment = $('<div>'); // Temporary container
for (var i = 0; i < 100; i++) {
$fragment.append('<li>Item ' + i + '</li>');
}
$('.list').append($fragment.children());
Wrapping and Unwrapping Elements
// Wrap each matched element
$('p').wrap('<div class="paragraph-wrapper">');
// Wrap all matched elements together
$('p').wrapAll('<div class="section">');
// Wrap inner content
$('h2').wrapInner('<span class="heading-text">');
// Unwrap (remove parent, keep child)
$('p').unwrap();
Element Removal vs Detach
// .remove() — removes element and its data/events permanently
var $gone = $('.temp').remove();
// .detach() — removes element but preserves data/events
var $stashed = $('.panel').detach();
// Later, reattach
$('#container').append($stashed);
// Data and events still work on the reattached element
// .empty() — removes all child content
$('.container').empty();
Common Mistakes
Creating elements inside loops - Using $('<div>') inside a loop creates and discards many jQuery objects. Build a string or fragment first.
Cloning elements with unique IDs - Cloning an element with an id creates duplicate IDs. Remove or change the ID on the clone.
Forgetting that .clone(true, true) is expensive - Deep cloning with events copies all nested event handlers. Use shallow cloning when events are not needed.
Appending to disconnected DOM - Creating elements and appending them to a detached fragment is fine, but measuring dimensions of detached elements returns 0.
Not cleaning up cloned event handlers - Cloning with events can cause unexpected behavior if the original's event handlers reference the original element. Use delegation or unbind.
Practice Questions
- How do you create a new div element with class and text in one expression?
- What is the difference between .clone(false) and .clone(true, true)?
- Why is building a string of HTML and appending once faster than appending in a loop?
- What does .detach() do differently from .remove()?
- How do you clone an element without cloning its event handlers?
Challenge: Build a dynamic form builder where users select a field type (text, select, checkbox, textarea) from a dropdown and click "Add Field" to clone a template element, modify it for the chosen type, and append it to the form.
FAQ
Mini Project
Build a tag input component. When the user types a tag and presses Enter, create a tag element (span with text and a remove button), append it to the tag container, and store the tag values in an array. Support cloning existing tags.
What's Next
Creating elements is half the story. Learn how jQuery form methods handle input values, Serialization, and submission efficiently.
← Previous
jQuery Dimensions — Complete Guide to Width, Height, Position, and Offset
Next →
jQuery Form Methods — Complete Guide to .val(), .serialize(), and Form Events
Built by the developers of DodaTech
Doda Browser, DodaZIP & Durga Antivirus Pro