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.
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);
});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>';
});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;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);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;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);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>';
});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');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
});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;
});/**
* 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;