DOM Manipulation

/**
 * Insert content after each element
 * @param selectors - Content to insert (HTML strings, elements, or collections)
 * @returns The Cash collection for chaining
 */
after(...selectors: Selector[]): this;

/**
 * Insert content before each element
 * @param selectors - Content to insert (HTML strings, elements, or collections)
 * @returns The Cash collection for chaining
 */
before(...selectors: Selector[]): this;

/**
 * Append content to each element
 * @param selectors - Content to append (HTML strings, elements, or collections)
 * @returns The Cash collection for chaining
 */
append(...selectors: Selector[]): this;

/**
 * Prepend content to each element
 * @param selectors - Content to prepend (HTML strings, elements, or collections)
 * @returns The Cash collection for chaining
 */
prepend(...selectors: Selector[]): this;

// Insert after elements
$('.item').after('<div class="separator"></div>');
$('.button').after($('.tooltip'));

// Insert before elements
$('.content').before('<h2>Title</h2>');

// Append to elements (inside, at the end)
$('.list').append('<li>New item</li>');
$('.container').append($('.moved-element'));

// Prepend to elements (inside, at the beginning)
$('.nav').prepend('<li class="home"><a href="/">Home</a></li>');

// Multiple content insertion
$('.section').append(
  '<p>First paragraph</p>',
  '<p>Second paragraph</p>',
  $('<p>').text('Third paragraph')
);

// Dynamic content creation
const newCard = $(`
  <div class="card">
    <h3>${title}</h3>
    <p>${content}</p>
  </div>
`);
$('.card-container').append(newCard);

/**
 * Append the collection to target elements
 * @param selector - Target elements to append to
 * @returns The Cash collection for chaining
 */
appendTo(selector: Selector): this;

/**
 * Prepend the collection to target elements
 * @param selector - Target elements to prepend to
 * @returns The Cash collection for chaining
 */
prependTo(selector: Selector): this;

/**
 * Insert the collection after target elements
 * @param selector - Target elements to insert after
 * @returns The Cash collection for chaining
 */
insertAfter(selector: Selector): this;

/**
 * Insert the collection before target elements
 * @param selector - Target elements to insert before
 * @returns The Cash collection for chaining
 */
insertBefore(selector: Selector): this;

// Move elements to different containers
$('.sidebar-item').appendTo('.main-content');
$('.header-button').prependTo('.header-actions');

// Reorder elements
$('.priority-item').insertBefore('.regular-item:first');
$('.footer-note').insertAfter('.content');

// Conditional moving
if (isTablet()) {
  $('.mobile-menu').appendTo('body');
} else {
  $('.mobile-menu').appendTo('.header');
}

// Move to dynamically created containers
$('<div class="new-container">').appendTo('body');
$('.items').appendTo('.new-container');

/**
 * Replace each element with new content
 * @param selector - New content to replace with
 * @returns The Cash collection for chaining
 */
replaceWith(selector: Selector): this;

/**
 * Replace all target elements with the collection
 * @param selector - Target elements to replace
 * @returns The Cash collection for chaining
 */
replaceAll(selector: Selector): this;

// Replace elements with new content
$('.old-button').replaceWith('<button class="new-button">Updated</button>');

// Replace with existing elements
$('.placeholder').replaceWith($('.real-content'));

// Replace all instances
$('<span class="highlight">Important</span>').replaceAll('.important-text');

// Conditional replacement
$('.legacy-widget').each(function() {
  const newWidget = createModernWidget(this.dataset);
  $(this).replaceWith(newWidget);
});

/**
 * Create deep clones of elements
 * @returns New Cash collection containing cloned elements
 */
clone(): this;

// Clone elements
const clonedItems = $('.template-item').clone();
$('.target-container').append(clonedItems);

// Clone and modify
$('.card-template').clone()
  .removeClass('template')
  .addClass('active')
  .find('.title').text('New Card').end()
  .appendTo('.card-grid');

// Clone for backup/undo functionality
const originalContent = $('.editable-area').clone();
// ... make changes ...
// Restore if needed: $('.editable-area').replaceWith(originalContent);

/**
 * Remove elements from DOM and clean up data/events
 * @param comparator - Optional selector to filter which elements to remove
 * @returns The Cash collection for chaining
 */
remove(comparator?: Comparator): this;

/**
 * Remove elements from DOM but keep data/events for reinsertion
 * @param comparator - Optional selector to filter which elements to detach
 * @returns The Cash collection for chaining
 */
detach(comparator?: Comparator): this;

/**
 * Remove all child elements and content from elements
 * @returns The Cash collection for chaining
 */
empty(): this;

// Remove elements completely
$('.temporary-notice').remove();

// Remove with selector filter
$('.item').remove('.expired');

// Detach for later reinsertion
const detachedItems = $('.movable').detach();
// ... do some work ...
$('.new-container').append(detachedItems);

// Empty containers
$('.dynamic-content').empty();
$('.list').empty().append('<li>Loading...</li>');

// Conditional removal
$('.item').each(function() {
  if ($(this).data('expired')) {
    $(this).remove();
  }
});

/**
 * Get HTML content of the first element
 * @returns HTML content as string
 */
html(): string;

/**
 * Set HTML content of all elements
 * @param html - HTML content to set
 * @returns The Cash collection for chaining
 */
html(html: string): this;

/**
 * Get text content of the first element
 * @returns Text content as string
 */
text(): string;

/**
 * Set text content of all elements
 * @param text - Text content to set
 * @returns The Cash collection for chaining
 */
text(text: string): this;

// Get content
const htmlContent = $('.article').html();
const textContent = $('.title').text();

// Set HTML content
$('.content').html('<p>New <strong>HTML</strong> content</p>');

// Set text content (auto-escaped)
$('.message').text('User input: ' + userInput);

// Dynamic content updates
$('.counter').text(`Items: ${items.length}`);
$('.status').html(`<span class="icon"></span> ${statusText}`);

// Content manipulation
const currentText = $('.element').text();
$('.element').text(currentText + ' - Updated');

// Safe text insertion (prevents XSS)
$('.user-comment').text(userComment); // Auto-escapes HTML

/**
 * Wrap each element individually with new content
 * @param selector - Wrapping content (HTML string, element, or collection)
 * @returns The Cash collection for chaining
 */
wrap(selector?: Selector): this;

/**
 * Wrap all elements together with new content
 * @param selector - Wrapping content (HTML string, element, or collection)
 * @returns The Cash collection for chaining
 */
wrapAll(selector?: Selector): this;

/**
 * Wrap the inner content of each element
 * @param selector - Wrapping content (HTML string, element, or collection)
 * @returns The Cash collection for chaining
 */
wrapInner(selector?: Selector): this;

/**
 * Remove the parent wrapper of each element
 * @returns The Cash collection for chaining
 */
unwrap(): this;

// Wrap each element individually
$('.item').wrap('<div class="item-wrapper"></div>');

// Wrap all elements together
$('.related-items').wrapAll('<div class="items-group"></div>');

// Wrap inner content
$('.card').wrapInner('<div class="card-content"></div>');

// Remove wrapper
$('.item-wrapper').children().unwrap(); // Removes .item-wrapper, keeps children

// Complex wrapping
$('.image').wrap(function() {
  return `<figure class="image-figure" data-id="${this.id}"></figure>`;
});

// Conditional wrapping
$('.inline-code').each(function() {
  if (!$(this).parent().is('pre')) {
    $(this).wrap('<code></code>');
  }
});

// Create and populate complex DOM structures
const createCard = (data) => {
  return $(`
    <div class="card" data-id="${data.id}">
      <div class="card-header">
        <h3 class="card-title">${data.title}</h3>
      </div>
      <div class="card-body">
        <p class="card-text">${data.description}</p>
      </div>
      <div class="card-footer">
        <button class="btn-primary">Action</button>
      </div>
    </div>
  `);
};

// Use the factory function
const cardData = { id: 1, title: 'Card Title', description: 'Description' };
const newCard = createCard(cardData);
$('.card-container').append(newCard);

// Efficient batch DOM updates
const items = ['Item 1', 'Item 2', 'Item 3'];
const listItems = items.map(item => `<li>${item}</li>`).join('');
$('.list').html(listItems);

// Or using DocumentFragment-like approach
const container = $('<div>');
items.forEach(item => {
  container.append(`<li>${item}</li>`);
});
$('.list').empty().append(container.children());

// Less efficient - multiple DOM queries
$('.item').addClass('processing');
$('.item').attr('data-status', 'busy');
$('.item').append('<span class="loader"></span>');

// More efficient - cache the selection
const items = $('.item');
items.addClass('processing')
     .attr('data-status', 'busy')
     .append('<span class="loader"></span>');