Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
append
prepend
remove
clone
insertBefore
insertAfter
detach
reverse
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
| Name | Type | Description |
|---|---|---|
| …content | string, DOM Element, or Query object | One 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
| Name | Type | Description |
|---|---|---|
| …content | string, DOM Element, or Query object | One 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 containerconst $template = $('#item-template').clone();$('#container').append($template);Shadow DOM
// Clone a user badge and append it to a list in a user-profileconst $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
| Name | Type | Description |
|---|---|---|
| target | string | A 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
| Name | Type | Description |
|---|---|---|
| target | string | A 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)andafter(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 reattachconst $items = $('ul li').detach();$items.addClass('modified');$('ul').append($items);Shadow DOM
// Detach user posts, modify them, and reattach in a user-profileconst $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}`);});