Query - DOM Manipulation

Insert, remove, and modify elements in the DOM.

Methods

append

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

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

Parameters

Returns

Query object (for chaining).

Example

$('div').append('<p>New content</p>');

prepend

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

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

Parameters

Returns

Query object (for chaining).

Example

$('section').prepend('<h2>New Section Title</h2>');

remove

$('selector').remove()

Remove the set of matched elements from the DOM.

Returns

Query object (for chaining).

Example

$('p.outdated').remove();

clone

$('selector').clone()

Create a deep copy of the set of matched elements.

Returns

A new Query object containing cloned elements.

Example

const $template = $('#item-template').clone();
$('#container').append($template);

insertBefore

$('selector').insertBefore(target)

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

Parameters

Returns

Query object (for chaining).

Example

$('<p>New paragraph</p>').insertBefore('p');

insertAfter

$('selector').insertAfter(target)

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

Parameters

Returns

Query object (for chaining).

Example

$('<p>New paragraph</p>').insertAfter('p');

appendTo

$('selector').appendTo(target)

Insert every element in the set of matched elements as the last child of the target.

Parameters

Returns

Query object of the target elements (for chaining).

Example

$('<p>New content</p>').appendTo('#container');

prependTo

$('selector').prependTo(target)

Insert every element in the set of matched elements as the first child of the target.

Parameters

Returns

Query object of the target elements (for chaining).

Example

$('<h2>Section Title</h2>').prependTo('section');

detach

$('selector').detach()

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

Returns

Query object containing the removed elements.

Example

const $items = $('ul li').detach();
$items.addClass('modified');
$('ul').append($items);