Query - DOM Manipulation API reference for Query methods related to DOM manipulation edit-3 API Reference
Categories

Query - DOM Manipulation

The DOM Manipulation methods in Query allow you to insert, remove, and modify elements in the DOM. These methods are crucial for creating dynamic and interactive user interfaces in your Semantic UI components.

append

Insert content to the end of each element in the set of matched elements.

Syntax

$('selector').append(...content)

Parameters

NameTypeDescription
…contentstring, DOM Element, or Query objectOne or more elements to insert

Returns

Query object (for chaining).

Usage

Standard

// Append a single element to a div
$('div').append('<p>New content</p>');
// Append multiple elements to a div
$('div').append(
'<p>First paragraph</p>',
'<p>Second paragraph</p>',
$('<button>Click me</button>')
);

Shadow DOM

// Append a new button to the action buttons in a user-profile
$$('user-profile').find('.action-buttons').append('<button>Follow</button>');

Example

prepend

Insert content to the beginning of each element in the set of matched elements.

Syntax

$('selector').prepend(...content)

Parameters

NameTypeDescription
…contentstring, DOM Element, or Query objectOne or more elements to insert

Returns

Query object (for chaining).

Usage

Standard

// Prepend a single element to a section
$('section').prepend('<h2>New Section Title</h2>');
// Prepend multiple elements to a section
$('section').prepend(
'<h2>Main Title</h2>',
'<div class="subtitle">Subtitle text</div>',
$('<hr>')
);

Shadow DOM

// Prepend a notification badge to the user name in a user-profile
$$('user-profile').find('.user-name').prepend('<span class="badge">New</span>');

Example

remove

Remove the set of matched elements from the DOM.

Syntax

$('selector').remove()

Returns

Query object (for chaining).

Usage

Standard

// Remove all paragraphs with a specific class
$('p.outdated').remove();

Shadow DOM

// Remove the offline status indicator from a user-profile
$$('user-profile').find('.status-indicator.offline').remove();

Example

clone

Create a deep copy of the set of matched elements.

Syntax

$('selector').clone()

Returns

A new Query object containing cloned elements.

Usage

Standard

// Clone a template and append it to a container
const $template = $('#item-template').clone();
$('#container').append($template);

Shadow DOM

// Clone a user badge and append it to a list in a user-profile
const $badge = $$('user-profile').find('.user-badge').clone();
$$('user-profile').find('.badge-list').append($badge);

Example

insertBefore

Insert every element in the set of matched elements before the target.

Syntax

$('selector').insertBefore(target)

Parameters

NameTypeDescription
targetstringA selector, element, or Query object before which the content will be inserted

Returns

Query object (for chaining).

Usage

Standard

// Insert a new paragraph before all existing paragraphs
$('<p>New paragraph</p>').insertBefore('p');

Shadow DOM

// Insert a new header before the user info in a user-profile
$$('<h3>User Details</h3>').insertBefore($$('user-profile').find('.user-info'));

Example

insertAfter

Insert every element in the set of matched elements after the target.

Syntax

$('selector').insertAfter(target)

Parameters

NameTypeDescription
targetstringA selector, element, or Query object after which the content will be inserted

Returns

Query object (for chaining).

Usage

Standard

// Insert a new paragraph after all existing paragraphs
$('<p>New paragraph</p>').insertAfter('p');

Shadow DOM

// Insert a new footer after the user bio in a user-profile
$$('<footer>Last updated: Today</footer>').insertAfter($$('user-profile').find('.user-bio'));

Example

Aliases The before(content) and after(content) methods are available as more intuitive aliases for inserting content before and after the current selection.

detach

Remove the set of matched elements from the DOM, but keep all associated data and events.

Syntax

$('selector').detach()

Returns

Query object containing the removed elements.

Usage

Standard

// Detach all list items, modify them, and reattach
const $items = $('ul li').detach();
$items.addClass('modified');
$('ul').append($items);

Shadow DOM

// Detach user posts, modify them, and reattach in a user-profile
const $posts = $$('user-profile').find('.user-posts').detach();
$posts.addClass('updated');
$$('user-profile').find('.posts-container').append($posts);

Example

reverse

Reverse the order of elements in the current set of matched elements.

Syntax

$('selector').reverse()

Returns

Query object containing the elements in reverse order.

Usage

// Reverse the order of list items
$('ul.my-list li').reverse().each((el, index) => {
console.log(`Reversed order: Item ${index + 1}`);
});

Example

Previous
Size & Dimensions
Next
DOM Traversal