Semantic UI
ctrl + k
On This Page
append
prepend
remove
clone
insertBefore
insertAfter
detach
clone
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 | The content to insert |
Returns
Query object (for chaining).
Usage
Standard
// Append a new paragraph to a div$('div').append('<p>New content</p>');Shadow DOM
// Append a new button to the action buttons in a user-profile$$('user-profile').find('.action-buttons').append('<button>Follow</button>');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 | The content to insert |
Returns
Query object (for chaining).
Usage
Standard
// Prepend a new heading to a section$('section').prepend('<h2>New Section Title</h2>');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>');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();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);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'));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'));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);Usage
// Reverse the order of list items$('ul.my-list li').reverse().each((el, index) => { console.log(`Reversed order: Item ${index + 1}`);});clone
Creates a deep copy of the set of matched elements.
Syntax
$('selector').clone()Returns
A new Query object containing cloned elements.
Usage
// Clone a template and append it to a containerconst $template = $('#item-template').clone();$('#container').append($template);