Query - DOM Manipulation

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

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

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

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

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

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

$('selector').remove()

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

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

$('selector').clone()

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

// 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);

$('selector').insertBefore(target)

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

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

$('selector').insertAfter(target)

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

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

$('selector').appendTo(target)

// Create a new paragraph and append it to a specific div
$('<p>New content</p>').appendTo('#container');

// Move existing elements to the end of another container
$('.item').appendTo('.destination');

// Append a new action button to the user profile
$$('<button>Edit Profile</button>').appendTo($$('user-profile').find('.actions'));

$('selector').prependTo(target)

// Create a new heading and prepend it to a section
$('<h2>Section Title</h2>').prependTo('section');

// Move existing elements to the beginning of another container
$('.priority-item').prependTo('.container');

// Prepend a status indicator to the user profile header
$$('<span class="status online">●</span>').prependTo($$('user-profile').find('.header'));

$('selector').detach()

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

// 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);

$('selector').reverse()

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