The Document Object Model maps HTML documents into a hierarchical node structure. jQuery streamlines traversal and modification by treating these nodes as programmable JavaScript objects. Every tag, attribute, and text segment becomes a distinct node, enabling targeted styling, restructuring, and dynamic behavior injection.

Core Manipulation Categories

jQuery organizes structural modifications into seven fundamental operations:

1. Node instantiation
2. Content injection
3. Element removal
4. Node duplication
5. Element substitution
6. Structural wrapping
7. Collection iteration

Node Enstantiation

Elements are dynamically generated by passing valid HTML strings directly into the jQuery factory function. The resulting string can be injected into the existing layout using positioning methods.

// Constructing a markup string
const markup = '<li class="task-entry">Pending Action</li>';
const $newItem = $(markup);

// Inject into the target container
$('#task-list').append($newItem);

Convention: Prefixing jQuery object variables with $ clearly differentiates them from raw strings or native DOM references.

Content Injection Patterns

Placement methods operate based on positional logic (internal start/end vs. external sibling). Each positional strategy provides a dual-method API where the subject and target parameters are reversed.

const $section = $('#main-content');
const $notification = $('<div class="alert">System Update</div>');

// Inject at the beginning of #main-content
$section.prepend($notification);

// Equivalent operation with reversed syntax
$notification.prependTo($section);

Element Removal Strategies

Three distinct approaches handle node elimination depending on whether event bindings or child nodes should persist.

• .remove(): Extracts the element and permanently discards attached event handlers. The method returns the detached node, allowing for temporary storage or reattachment.
• .detach(): Extracts the element while preserving all event bindings and jQuery data. Ideal for temporary extraction and later restoration.
• .empty(): Strips all child nodes from a parent container while leaving the parent element structurally intact.

// Extracting and swapping nodes
const $movedElement = $('#inventory .item-3').remove();
$('#archive').append($movedElement); // Reinserts without original listeners

// Extracting with state preservation
const $cachedElement = $('#inventory .item-3').detach();
$('#archive').append($cachedElement); // Retains original event bindings

Node Duplication

The .clone() method creates a copy of the matched elements. A boolean parameter controls whether event data is transferred to the duplicate.

// Clone structure only (default: false)
const $basicCopy = $('.template').clone();

// Clone structure + attached events
const $fullCopy = $('.template').clone(true);
$('#preview-panel').append($fullCopy);

Element Substitution

Replace existing nodes with new markup using .replaceWith() or its inverse, .replaceAll().

const $legacyElement = $('.v1-badge');
const $updatedElement = $('<span class="v2-indicator">Refreshed</span>');

// Replace target with new element
$legacyElement.replaceWith($updatedElement);

// Replace all targets matching the selector with the new element
$updatedElement.replaceAll('.v1-badge');

Structural Wrapping

Encapsulate existing markup by injecting new container elements around matched nodes.

• .wrap(): Generates a distinct container around every individual matched element.
• .wrapAll(): Groups the entire matched set under a single shared parent container.
• .wrapInner(): Places the container in side the matched element, surrounding its existing children and text.

// Individual encapsulation
$('article').wrap('<div class="border-frame"></div>');

// Collective grouping
$('article').wrapAll('<section class="batch-container"></section>');

// Internal encapsulation
$('article').wrapInner('<div class="padding-layer"></div>');

Collection Iteration

The .each() method traverses a jQuery collection, executing a callback function for every matched node. The callback receives the zero-based index and the native DOM node as arguments. Returning false within the callback terminates the loop prematurely.

$('.data-row').each(function(rowIndex, nativeNode) {
    const $row = $(this); // Equivalent to $(nativeNode)
    $row.attr('data-sequence', rowIndex);

    // Stop processing after the third element
    if (rowIndex >= 3) {
        return false;
    }
});