jQuery Element Creation and DOM Manipulation vs document.createElement

By the end of this page, you'll understand how jQuery creates DOM elements, how that differs from native document.createElement(), and when each approach is appropriate. You'll also see how to set attributes, styles, classes, and append elements in a cleaner way using practical examples.

When you build HTML elements in JavaScript, you are working with the DOM (Document Object Model). The native browser API provides methods like document.createElement() and appendChild() for this.

jQuery offers a different style: instead of calling low-level DOM methods directly, you usually create elements by passing an HTML-like string to $(), then chain methods such as .addClass(), .css(), .append(), and .appendTo().

For example, native DOM code like this:

var div = document.createElement("div");
div.className = "box";
div.style.display = "none";

can be written in jQuery like this:

var $div = $("<div>")
  .addClass("box")
  .css("display", "none");

This matters because:

Think of native DOM manipulation as building furniture using individual tools:

• document.createElement() = cut a new piece
• setting properties = paint or label it
• appendChild() = attach it to the structure

jQuery is more like using a toolkit with a smoother workflow:

• $("<div>") = create the piece
• .addClass() / .css() = style it
• .append() / .appendTo() = place it where it belongs

Both approaches build the same thing. jQuery mainly changes how you express the steps, often making the code feel more fluent.

Native DOM version:

var d = document;
var odv = d.createElement("div");
odv.style.display = "none";

var t = d.createElement("table");
t.cellSpacing = 0;
t.className = "text";

odv.appendChild(t);

A jQuery version:

var $odv = $("<div>").css("display", "none");
var $table = $("<table>", {
  cellspacing: 0,
  "class": "text"
});

$odv.append($table);
this.OuterDiv = $odv[0];

What this does

• $("<div>") creates a new div element.
• .css("display", "none") sets the inline style.

Consider this jQuery example:

var $box = $("<div>").hide();
var $table = $("<table>").attr("cellspacing", 0).addClass("text");
$box.append($table);
$("body").append($box);

Step by step:

1. $("<div>")

   • jQuery creates a new div element in memory.
   • It is not yet on the page.

2. .hide()

   • jQuery sets the element's display so it is hidden.

3. $("<table>")

   • jQuery creates a new table element.
   • This table is also only in memory at this point.

4. .attr("cellspacing", 0)

   • Adds the cellspacing attribute to the table.

Creating elements dynamically is common in real applications.

Rendering API data

If an API returns a list of products, you might create rows, cards, or table entries using jQuery.

var $row = $("<tr>");
$row.append($("<td>").text(product.name));
$row.append($("<td>").text(product.price));

Building reusable UI components

Older jQuery-based codebases often construct modals, tooltips, dropdowns, and alerts dynamically.

var $alert = $("<div>")
  .addClass("alert")
  .text("Saved successfully");

Conditional rendering

You may create elements only when needed.

if (items.length === 0) {
  $("#results").append($("<p>").text("No results found"));
}

Data tables and forms

In real projects, developers usually choose one style and stay consistent.

Common jQuery patterns

Create and configure in one chain

var $button = $("<button>")
  .addClass("save-btn")
  .text("Save")
  .prop("disabled", true);

Append multiple child elements

var $card = $("<div>").addClass("card");
$card.append($("<h2>").text("Profile"));
$card.append($("<p>").text("User details go here"));

Use variables with $ prefix

Many codebases name jQuery objects like $table or $dialog to distinguish them from raw DOM elements.

var $table = $();
 tableEl = $table[];

1. Assuming $.create() exists

This is not a standard jQuery API.

Broken code:

var el = $.create("div");

Correct:

var $el = $("<div>");

2. Confusing a jQuery object with a DOM element

Broken code:

var $div = $("<div>");
$div.appendChild(document.createElement("span"));

appendChild() is a DOM method, not a jQuery method.

Correct:

var $div = $("<div>");
$div.append($("<span>"));

Or use the DOM node:

$div[0].appendChild(.());

document.createElement() vs $("<tag>")

// Create element with jQuery
var $div = $("<div>");

// Set class
$div.addClass("box");

// Set CSS
$div.css("display", "none");
$div.hide(); // shorthand for hiding

// Set attributes
var $table = $("<table>").attr("cellspacing", 0);

// Set properties
var $input = $("<input>").prop("disabled", true);

// Set text
var $p = $("<p>").text("Hello");

// Append child
$div.append($table);

// Append to document
$("body").append($div);

// Convert jQuery object to DOM node
var divEl = $div[0];

// Convert DOM node to jQuery object
var $wrapped = $(divEl);

Key rules

• There is no standard $.create() in jQuery.

Is $.create() a real jQuery function?

No. Standard jQuery does not include $.create(). Use $("<div>") to create elements.

What is the jQuery equivalent of document.createElement()?

Usually $("<tag>"), such as $("<div>") or $("<table>").

Is jQuery better than document.createElement()?

Not always. jQuery can be shorter and more consistent in older jQuery projects, but native DOM methods are perfectly valid and common in modern JavaScript.

How do I append a jQuery-created element to the page?

Use .append() or .appendTo().

$("body").append($("<div>"));

How do I get the actual DOM element from a jQuery object?

Use index access:

var el = $div[0];

Should I use or ?

• DOM manipulation — This is the broader topic that includes creating, updating, and removing elements.
• jQuery selectors — After creating elements, you often need to find existing ones.
• Event handling — Dynamically created elements often need click or input handlers.
• Attributes vs properties — Important when setting values like class, checked, or disabled.
• append vs appendTo — Both insert elements, but with different calling styles.
• Native JavaScript DOM APIs — Useful for comparing jQuery with modern browser methods.
• Method chaining — A common jQuery style that makes DOM code compact.
• text vs html — Important for safely inserting content into elements.