Creating a div element in jQuery

jQuery

Web Development

HTML

Programming

Div Element

Creating a div element in jQuery

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

JavaScript & Web

Introduction

jQuery provides several ways to create new DOM elements dynamically. The most common is passing an HTML string to the $() function, which parses it and returns a jQuery object you can manipulate before inserting it into the page. You can also pass a plain tag string with a properties object for a cleaner, XSS-safe approach. Understanding both methods helps you choose the right one based on whether your content comes from user input or is hardcoded.

Basic Creation

javascript

1// Method 1: HTML string
2var newDiv = $('<div>');
3
4// Method 2: Self-closing tag
5var newDiv = $('<div/>');
6
7// Method 3: Full HTML string with content
8var newDiv = $('<div>Hello World</div>');
9
10// All three create a jQuery-wrapped div element

The created element exists in memory but is not yet part of the DOM — you must insert it explicitly.

Adding Attributes and Content

javascript

1// Chain methods after creation
2var card = $('<div>')
3    .attr('id', 'user-card')
4    .addClass('card shadow')
5    .css({ padding: '20px', margin: '10px' })
6    .text('Welcome back, Alice');
7
8// Append to the page
9$('#container').append(card);

Using the Properties Object

javascript

1// Pass attributes as a second argument — cleaner for multiple attributes
2var card = $('<div>', {
3    id: 'user-card',
4    class: 'card shadow',
5    text: 'Welcome back, Alice',
6    css: { padding: '20px', margin: '10px' },
7    click: function() {
8        alert('Card clicked!');
9    }
10});
11
12$('#container').append(card);

The properties object accepts any jQuery method name as a key — text, html, css, click, addClass, attr, etc.

Inserting into the DOM

javascript

1var newDiv = $('<div>').text('New content');
2
3// Append as the last child
4$('#container').append(newDiv);
5
6// Prepend as the first child
7$('#container').prepend(newDiv);
8
9// Insert after a specific element
10$('#existing-div').after(newDiv);
11
12// Insert before a specific element
13$('#existing-div').before(newDiv);
14
15// Replace an element
16$('#old-div').replaceWith(newDiv);
17
18// Wrap an element with the new div
19$('#content').wrap($('<div>').addClass('wrapper'));

Creating Complex Structures

javascript

1// Build nested elements
2var card = $('<div>').addClass('card').append(
3    $('<div>').addClass('card-header').append(
4        $('<h3>').text('User Profile')
5    ),
6    $('<div>').addClass('card-body').append(
7        $('<p>').text('Name: Alice'),
8        $('<p>').text('Role: Admin'),
9        $('<button>')
10            .addClass('btn btn-primary')
11            .text('Edit')
12            .on('click', function() {
13                console.log('Edit clicked');
14            })
15    )
16);
17
18$('#app').append(card);

From an HTML String

javascript

1// For complex HTML, a template string is often clearer
2var cardHtml = `
3    <div class="card">
4        <div class="card-header">
5            <h3>User Profile</h3>
6        </div>
7        <div class="card-body">
8            <p>Name: Alice</p>
9            <p>Role: Admin</p>
10        </div>
11    </div>
12`;
13
14var card = $(cardHtml);
15card.find('.card-body').append(
16    $('<button>').addClass('btn').text('Edit')
17);
18
19$('#app').append(card);

Creating Multiple Elements

javascript

1// Create a list from an array
2var items = ['Apple', 'Banana', 'Cherry', 'Date'];
3
4var list = $('<ul>').addClass('fruit-list');
5items.forEach(function(item) {
6    list.append($('<li>').text(item));
7});
8
9$('#container').append(list);

javascript

1// Using $.each
2var data = [
3    { name: 'Alice', age: 30 },
4    { name: 'Bob', age: 25 }
5];
6
7var table = $('<table>').addClass('table');
8var thead = $('<thead>').append(
9    $('<tr>').append(
10        $('<th>').text('Name'),
11        $('<th>').text('Age')
12    )
13);
14var tbody = $('<tbody>');
15
16$.each(data, function(i, row) {
17    tbody.append(
18        $('<tr>').append(
19            $('<td>').text(row.name),
20            $('<td>').text(row.age)
21        )
22    );
23});
24
25table.append(thead, tbody);
26$('#container').append(table);

Performance: Document Fragment

For adding many elements, batch them to minimize DOM reflows:

javascript

1// SLOW: appends to DOM 1000 times
2for (var i = 0; i < 1000; i++) {
3    $('#list').append($('<li>').text('Item ' + i));
4}
5
6// FAST: build in memory, append once
7var fragment = $(document.createDocumentFragment());
8for (var i = 0; i < 1000; i++) {
9    fragment.append($('<li>').text('Item ' + i));
10}
11$('#list').append(fragment);

Vanilla JavaScript Equivalent

javascript

1// jQuery
2var div = $('<div>').attr('id', 'myDiv').text('Hello').appendTo('#container');
3
4// Vanilla JS equivalent
5var div = document.createElement('div');
6div.id = 'myDiv';
7div.textContent = 'Hello';
8document.getElementById('container').appendChild(div);

Common Pitfalls

XSS with .html() and user input: $('<div>').html(userInput) executes any script tags in the input. Use .text() for untrusted content, which escapes HTML entities automatically.
Created elements are detached: $('<div>') creates an element in memory. If you do not append/prepend/insert it into the DOM, it is never visible. Forgetting the insertion step is a common mistake.
Event handlers on dynamic elements: Events bound with .on('click', handler) on a dynamically created element only work after the element is in the DOM. Alternatively, use event delegation: $(document).on('click', '.dynamic-class', handler).
Duplicate IDs: Creating multiple elements with the same id attribute violates HTML spec and causes unpredictable behavior with $('#id') selectors. Use classes instead for repeated elements.
Performance with large HTML strings: Parsing large HTML strings with $(htmlString) is slower than building with document.createElement. For thousands of elements, use document fragments or virtual DOM libraries.

Summary

Use $('<div>') or $('<div>', { properties }) to create new elements
Chain .attr(), .addClass(), .css(), .text(), and .on() to configure before inserting
Insert with .append(), .prepend(), .after(), .before(), or .replaceWith()
Use .text() instead of .html() for user-provided content to prevent XSS
Batch DOM insertions with document fragments for better performance
Use event delegation for click handlers on dynamically created elements

Tackling System Design Interview Problems

A short course that equips you with the skills to approach system design interviews methodically.

Start the free course

Track what you have practised

A free account saves your progress, solutions and study plan across every problem on Codemia.

Interview Questions practice on Codemia

Over 8,000 real interview questions from top companies, searchable by company and role.

Browse interview questions

Creating a div element in jQuery

Interview Questions practice on Codemia

Introduction

Basic Creation

Adding Attributes and Content

Using the Properties Object

Inserting into the DOM

Creating Complex Structures

From an HTML String

Creating Multiple Elements

Performance: Document Fragment

Vanilla JavaScript Equivalent

Common Pitfalls

Summary

Related reading

Tackling System Design Interview Problems

Track what you have practised

Interview Questions practice on Codemia