JQuery learning notes operations jQuery object document processing _ jquery-js tutorial

The hierarchies of HTML documents are tree-based, and each tag can be regarded as each node of the tree. If the jQuery object is operated and the structure of the HTML document is changed, it is called document processing. Below are some common methods in the format of $ (selector ). method, where $ (selector) is the currently selected element:

Move Element

Method	Description
Append ($ (selector ))	Append content to the current element
AppendTo ($ (selector ))	Append the current element to an element. However, since the current element will be moved as needed, the jQuery object is changed and can be restored using end ().
Prepend ($ (selector ))	To the internal content of the current element
PrependTo ($ (selector ))	Place the current element inside the element. Similar to appendTo (), it will change the object
After ($ (selector ))	Insert content to the current element
InsertAfter ($ (selector ))	Insert the current element to 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 Element

Method	Description
$ (Html)	Create and generate a jQuery object. Create a jQuery object pointing to a new element based on the original HTML code string, and add it to the document using a moving method.
Clone ()	Copy and generate a jQuery object. Copy the currently selected page element to generate the jQuery object of the copy element and add it to the document by moving it. In addition, clone () points to the copy, which is equivalent to modifying the jQuery object. Therefore, you can use end () to restore to the currently selected element. The second end () method completely restores the changes to the jQuery object.

Replacement element

Method	Description
ReplaceWith ($ (selector )) ReplaceWith ($ (html ))	Move the original element on the page to replace the currently selected page element, or add a new element to replace
ReplaceAll ($ (selector )) ReplaceAll ($ (html ))	Replace an element with the currently selected element, which can be the original or new element on the page. The current element copy will also be copied as needed to change the jQuery object

Package Elements

Method	Description
Wrap ($ (selector )) Wrap ($ (html ))	Copy the original elements on the page to wrap the currently selected elements, or add new elements to wrap
Unwrap ()	Used to remove the parent element of the current element, but the text content inside the parent element is retained.
WrapAll ($ (selector ))	Copy the original elements of the page to package all the currently selected elements. Different from wrap (), each element is wrapped.
WrapInner ($ (selector ))	Copy the original elements of the page to wrap the text and descendant elements inside each selected element respectively, different from that of the wrap () package each element.

Delete and clear elements

Method	Description
Remove ()	Delete the current element. The text content contained in this element and the child element are deleted together, and the bound event no longer exists.
Detach ()	The current element is also deleted, but the Bound event still exists.
Empty ()	Clears the current element. The text content and descendant elements of the element are deleted, but the element itself is retained.