or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

ajax.mdanimations.mdcss-styling.mddata-storage.mddom-manipulation.mddom-traversal.mdevents.mdforms.mdindex.mdutilities.md
tile.json

dom-manipulation.mddocs/

DOM Manipulation

Comprehensive methods for modifying DOM structure, content, and attributes with automatic cross-browser handling. jQuery provides safe, efficient methods for all common DOM manipulation tasks.

Capabilities

Content Manipulation

Get and set element content with automatic encoding and cross-browser compatibility.

/**
 * Get or set HTML content of elements
 * @param content - Optional HTML string to set
 * @returns jQuery object (when setting) or HTML string (when getting)
 */
html(): string;
html(content: string | function): jQuery;

/**
 * Get or set text content of elements (automatically encoded)
 * @param content - Optional text string to set
 * @returns jQuery object (when setting) or text string (when getting)
 */
text(): string;
text(content: string | number | function): jQuery;

/**
 * Get or set form element values
 * @param value - Optional value to set
 * @returns jQuery object (when setting) or value (when getting)
 */
val(): string | number | string[];
val(value: string | number | string[] | function): jQuery;

Usage Examples:

// Get content
const htmlContent = $('#container').html();
const textContent = $('.title').text();
const inputValue = $('#username').val();

// Set content
$('#output').html('<p>New HTML content</p>');
$('.message').text('Plain text message');
$('#email').val('user@example.com');

// Set multiple values
$('input[type="checkbox"]').val(['option1', 'option3']);

// Using functions
$('.item').html(function(index, currentHtml) {
  return currentHtml + ' - Item #' + (index + 1);
});

Structure Manipulation

Insert, move, and remove elements in the DOM structure.

/**
 * Insert content at the end of each element
 * @param content - Content to insert (HTML, elements, or jQuery objects)
 * @returns jQuery object for chaining
 */
append(...content: (string | Element | jQuery | function)[]): jQuery;

/**
 * Insert content at the beginning of each element
 * @param content - Content to insert
 * @returns jQuery object for chaining
 */
prepend(...content: (string | Element | jQuery | function)[]): jQuery;

/**
 * Insert content before each element
 * @param content - Content to insert
 * @returns jQuery object for chaining
 */
before(...content: (string | Element | jQuery | function)[]): jQuery;

/**
 * Insert content after each element
 * @param content - Content to insert
 * @returns jQuery object for chaining
 */
after(...content: (string | Element | jQuery | function)[]): jQuery;

Usage Examples:

// Basic insertion
$('#list').append('<li>New item</li>');
$('.container').prepend('<h2>Title</h2>');
$('#button').before('<label>Click here:</label>');
$('.content').after('<hr>');

// Insert multiple elements
$('#toolbar').append(
  '<button>Save</button>',
  '<button>Cancel</button>',
  $('<button>').text('Help')
);

// Using functions
$('.item').append(function(index) {
  return '<span class="number">' + (index + 1) + '</span>';
});

Insertion Direction Methods

Insert current elements relative to target elements.

/**
 * Append current elements to target elements
 * @param target - Target selector or elements
 * @returns jQuery object for chaining
 */
appendTo(target: string | Element | jQuery): jQuery;

/**
 * Prepend current elements to target elements
 * @param target - Target selector or elements
 * @returns jQuery object for chaining
 */
prependTo(target: string | Element | jQuery): jQuery;

/**
 * Insert current elements before target elements
 * @param target - Target selector or elements
 * @returns jQuery object for chaining
 */
insertBefore(target: string | Element | jQuery): jQuery;

/**
 * Insert current elements after target elements
 * @param target - Target selector or elements
 * @returns jQuery object for chaining
 */
insertAfter(target: string | Element | jQuery): jQuery;

Element Removal

Remove elements and their associated data/events from the DOM.

/**
 * Remove all child nodes from elements
 * @returns jQuery object for chaining
 */
empty(): jQuery;

/**
 * Remove elements from DOM and clean up data/events
 * @param selector - Optional selector to filter elements to remove
 * @returns jQuery object containing removed elements
 */
remove(selector?: string): jQuery;

/**
 * Remove elements from DOM but keep data/events for reinsertion
 * @param selector - Optional selector to filter elements to detach
 * @returns jQuery object containing detached elements
 */
detach(selector?: string): jQuery;

Usage Examples:

// Empty containers
$('#messages').empty();

// Remove specific elements
$('.temporary').remove();
$('tr').remove('.highlight');

// Detach for later use
const detachedItems = $('.moveable').detach();
// ... do something else ...
$('#newContainer').append(detachedItems);

Element Replacement

Replace elements with new content.

/**
 * Replace each element with new content
 * @param newContent - Content to replace with
 * @returns jQuery object containing replaced elements
 */
replaceWith(newContent: string | Element | jQuery | function): jQuery;

/**
 * Replace target elements with current elements
 * @param target - Target selector or elements to replace
 * @returns jQuery object for chaining
 */
replaceAll(target: string | Element | jQuery): jQuery;

Element Cloning

Create deep copies of elements with optional data/event copying.

/**
 * Create deep copy of elements
 * @param withDataAndEvents - Copy data and events from original elements
 * @param deepWithDataAndEvents - Copy data and events from all descendant elements
 * @returns jQuery object containing cloned elements
 */
clone(withDataAndEvents?: boolean, deepWithDataAndEvents?: boolean): jQuery;

Usage Examples:

// Basic cloning
const copy = $('#template').clone();
$('#container').append(copy);

// Clone with events
const copyWithEvents = $('.widget').clone(true);

// Clone with deep events
const deepCopy = $('.complex-widget').clone(true, true);

Element Wrapping

Wrap elements with new parent elements or unwrap them.

/**
 * Wrap each element with HTML structure
 * @param wrappingElement - HTML string, element, or function returning wrapping element
 * @returns jQuery object for chaining
 */
wrap(wrappingElement: string | Element | jQuery | function): jQuery;

/**
 * Wrap all elements together with single HTML structure
 * @param wrappingElement - HTML string, element, or function returning wrapping element
 * @returns jQuery object for chaining
 */
wrapAll(wrappingElement: string | Element | jQuery | function): jQuery;

/**
 * Wrap the content of each element with HTML structure
 * @param wrappingElement - HTML string, element, or function returning wrapping element
 * @returns jQuery object for chaining
 */
wrapInner(wrappingElement: string | Element | jQuery | function): jQuery;

/**
 * Remove parent wrapper elements
 * @param selector - Optional selector to filter which parents to remove
 * @returns jQuery object for chaining
 */
unwrap(selector?: string): jQuery;

Usage Examples:

// Wrap each element individually
$('.item').wrap('<div class="wrapper"></div>');

// Wrap all elements together as a group
$('.related').wrapAll('<div class="group"></div>');

// Wrap inner content
$('.title').wrapInner('<strong></strong>');

// Unwrap elements
$('.wrapped').unwrap();

// Unwrap with selector filter
$('.item').unwrap('.temporary-wrapper');

// Using functions
$('.item').wrap(function(index) {
  return '<div class="wrapper-' + index + '"></div>';
});

Attribute Manipulation

Get and set element attributes with cross-browser normalization.

/**
 * Get or set element attributes
 * @param name - Attribute name or object of attribute/value pairs
 * @param value - Optional attribute value
 * @returns jQuery object (when setting) or attribute value (when getting)
 */
attr(name: string): string | undefined;
attr(name: string, value: string | number | function): jQuery;
attr(attributes: object): jQuery;

/**
 * Remove attributes from elements
 * @param attributeName - Space-separated attribute names to remove
 * @returns jQuery object for chaining
 */
removeAttr(attributeName: string): jQuery;

Usage Examples:

// Get attributes
const src = $('#image').attr('src');
const title = $('.link').attr('title');

// Set attributes
$('#image').attr('src', 'new-image.jpg');
$('.link').attr('title', 'Click for more info');

// Set multiple attributes
$('#image').attr({
  'src': 'image.jpg',
  'alt': 'Description',
  'title': 'Image title'
});

// Remove attributes
$('.temp').removeAttr('data-temp');

Property Manipulation

Get and set element properties (different from attributes).

/**
 * Get or set element properties
 * @param name - Property name or object of property/value pairs
 * @param value - Optional property value
 * @returns jQuery object (when setting) or property value (when getting)
 */
prop(name: string): any;
prop(name: string, value: any): jQuery;
prop(properties: object): jQuery;

/**
 * Remove properties from elements
 * @param propertyName - Space-separated property names to remove
 * @returns jQuery object for chaining
 */
removeProp(propertyName: string): jQuery;

Usage Examples:

// Get properties
const isChecked = $('#checkbox').prop('checked');
const isDisabled = $('#button').prop('disabled');

// Set properties
$('#checkbox').prop('checked', true);
$('#button').prop('disabled', false);

// Set multiple properties
$('#input').prop({
  'readonly': true,
  'required': false
});

CSS Class Manipulation

Manage CSS classes on elements.

/**
 * Add CSS classes to elements
 * @param className - Class names to add or function returning class names
 * @returns jQuery object for chaining
 */
addClass(className: string | function): jQuery;

/**
 * Remove CSS classes from elements
 * @param className - Optional class names to remove or function returning class names
 * @returns jQuery object for chaining
 */
removeClass(className?: string | function): jQuery;

/**
 * Toggle CSS classes on elements
 * @param className - Class names to toggle or function returning class names
 * @param state - Optional boolean to force add (true) or remove (false)
 * @returns jQuery object for chaining
 */
toggleClass(className: string | function, state?: boolean): jQuery;

/**
 * Test if any element has the specified class
 * @param className - Class name to test for
 * @returns true if any element has the class
 */
hasClass(className: string): boolean;

Usage Examples:

// Add classes
$('.item').addClass('active');
$('.button').addClass('primary large');

// Remove classes
$('.item').removeClass('active');
$('.all').removeClass(); // Remove all classes

// Toggle classes
$('.collapsible').toggleClass('collapsed');
$('.item').toggleClass('selected', shouldSelect);

// Test for classes
if ($('#menu').hasClass('open')) {
  // Menu is open
}

// Using functions
$('.item').addClass(function(index, currentClass) {
  return 'item-' + index;
});

Static Manipulation Methods

/**
 * Create deep copy of elements with optional data/event copying
 * @param element - Element to clone
 * @param withDataAndEvents - Copy data and events
 * @param deepWithDataAndEvents - Copy data and events from descendants
 * @returns Cloned element
 */
$.clone(element: Element, withDataAndEvents?: boolean, deepWithDataAndEvents?: boolean): Element;

/**
 * Clean up jQuery data and events from elements before removal
 * @param elements - Elements to clean
 */
$.cleanData(elements: Element[]): void;

/**
 * Process HTML string before DOM insertion (security filtering)
 * @param html - HTML string to process
 * @returns Processed HTML string
 */
$.htmlPrefilter(html: string): string;