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

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.