JQuery DOM node operation

Source: Internet
Author: User

First, create a node

var box = $ (' <div ID =box> node </div> '); Create a Node

$ (' body '). appended (box); Inserting a node into the <body> element interior

Second, insert the node

Internal Insertion Node method

Append (content) Inserts a node after the specified element content

Append (function (INDEX,HML) {}) Inserts node content after the specified element using an anonymous function (HTML is the original node)

AppendTo (content) moves the specified element back into the content inside the specified element

Prepend (content) Inserts a node in front of the specified element content

Prepend (function (index,html) {}) Inserts a node in front of the specified element using an anonymous function content

Prependto (content) moves the specified element in front of the content inside the specified element

External Insertion Node method

After (content) inserts a node after the outside of the specified element content

After (function (index,html) {}) uses anonymous functions to insert nodes outside the specified element content

Before (content) inserts a node in front of the specified element content

Before (function (index,html) {}) Inserts a node in front of the specified element using an anonymous function content

InsertAfter (content) moves the specified node to the specified node element after content external

InsertBefore (content) moves the specified node to the specified node element before content outside

Third, the Parcel node

Wrap (HTML) wraps a layer of HTML code into the specified element

Wrap (Element) wraps a layer of DOM object node $ (' div ') into the specified element. Wrap (Document.createelement (' strong '));

Wrap (Index) {}) uses anonymous functions to wrap a layer of custom content into a specified element

Unwrap () removes the contents of a specified element package

Wrapall (HTML) to wrap all elements together in HTML

Wrapall (Element) wraps all the elements together with a DOM object

Wrapinner (HTML) wraps a layer of HTML into the child content of the specified element

Wrapinner (elelment) wraps a layer of DOM object nodes into the child content of the specified element

Wrapinner (function (index) {}) wraps a layer of child content of the specified element with an anonymous function

Iv. node operation

Replication nodes

$ (' body '). Append ($ (' div '). Clone (Ture)); Copy a node to add to HTML

The Clone (true) parameter can be null to indicate that only elements and content are copied, and the event behavior is not replicated. The event behavior can be duplicated by adding true.

Delete a node

$ (' div '). Remove (); Delete div element directly

Remove () Removes the previously specified element when no argument is taken. You can also take a selector parameter, such as $ (' div ') remove (' #box '), to delete only the Id=box div.

Delete node for reserved events

$ (' div '). Detach (); Preserving the deletion of event behavior

After the deletion itself the method can return the currently deleted node object.

Emptying nodes

$ (' div '). empty (); Delete the content in the node.

Replace node

$ (' div '). ReplaceWith (' <span> node </span> '); Replace a div with a SPAN element

$ (' <span> node </span> '). ReplaceAll (' div '); Ditto

Once the node is replaced, the event behavior that it contains disappears.

JQuery DOM node operation

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.