SoFunction
Updated on 2025-02-28

jQuery study notes Operating jQuery objects Document processing

The following are some common methods, the format is $(selector). Methods, where $(selector) is the currently selected element:

 

Move elements

method

describe

append($(selector))

Append content to the internals of the current element

appendTo($(selector))

Append the current element inside an element. However, since the current element will be moved as needed, the jQuery object has been changed and can be restored by end()

prepend($(selector))

Prefix content to the internals of the current element

prependTo($(selector))

Prefix the current element inside an element. Similar to appendTo(), it will change the object

after($(selector))

Insert content after the current element

insertAfter($(selector))

Insert the current element after an element. Similar to appendTo(), it will change the object

before($(selector))

Insert content before the current element

insertBefore($(selector))

Insert the current element before an element. Similar to appendTo(), it will change the object

 

Add elements

method

describe

$(html)

Create a generated jQuery object. Based on the original HTML code string, create a jQuery object pointing to a new element and use the move method to add it to the document

clone()

Copy generates jQuery object. Copy the currently selected page element, generate the jQuery object of the copy element, and use the move method to add it to the document. Moreover, clone() points to the copy, which is equivalent to changing the jQuery object, so you can restore the current selected element by end(); the second end() completely restores the changes to the jQuery object.

 

Replace elements

method

describe

replaceWith($(selector))

replaceWith($(html))

Move the original elements on the page to replace the currently selected page element, or add new elements to replace it

replaceAll($(selector))

replaceAll($(html))

Replacing an element with the currently selected element can make the original element on the page or a new element. The current element copy will also be copied as needed, thereby changing the jQuery object

 

Package elements

method

describe

wrap($(selector))

wrap($(html))

Copy the original element on the page to wrap the currently selected element, or add new elements to wrap it

unwrap()

Used to remove the parent element of the current element, but the text content inside the parent element is still retained

wrapAll($(selector))

Copy the original elements of the page to wrap all currently selected elements together, unlike wrap() to wrap each element separately

wrapInner($(selector))

Copy the original elements of the page to wrap the text and descendant elements inside each currently selected element, unlike wrap() to wrap each element itself.

 

Delete and clear elements

method

describe

remove()

Delete the current element, and the text content contained in the element and the descendant elements will be deleted together, and the bound events will no longer exist.

detach()

It also deletes the current element, but the bound event still exists

empty()

Clear the current element, and the text content of the element and descendant elements will be deleted, but retain it itself