Home > Developer > Web Develop
A Create a Node
var box = $ (' <div> node </div> '); Create a node, or var box = "<div> node </div>"; $ (' body '). Append (box); Inserting a node inside a <body> elementtwo. Inserting nodes
JQuery provides several ways to insert a node:
1. Internal Insertion Node method
| Method name |
Describe |
| Append (content) |
Inserts a node after a specified element inside the content |
| Append (function (index, HTML) {}) |
To insert a node behind a specified element using an anonymous function |
| AppendTo (content) |
Moves the specified element back into the content inside the specified element |
| Prepend (content) |
Inserts a node to the front of the content inside the specified element |
| Prepend (function (index, HTML) {}) |
To insert a node in front of a specified element using an anonymous function |
| Prependto (content) |
Moves the specified element in front of content inside the specified element |
code example:
$ (' div '). Append (' <strong> node </strong> '); Insert the strong node $ (' div ') into the div. append (function (index, HTML) {/////Use anonymous function to insert node, index for the Div, i.e. the first div,html is the inner content of the original node. return ' <strong> node </strong>+index+html ';}); $ (' span '). AppendTo (' div '); Tell the span node to move into the div node within $ (' span '). AppendTo ($ (' div ')); Ibid. $ (' div '). prepend (' <span> node </span> '); Inserts a span into the front $ (' div ') inside the div. append (function (index, HTML) {//Use anonymous function, same as return ' <span> node </span> ';}); $ (' span '). Prependto (' div '); Move span into front of $ (' span ') inside the Div. prependto ($ (' div ')); Ditto2. External Insertion Node method
| Method name |
Describe |
| After (content) |
Inserts a node after the outside of the specified element content |
| After (function (index, HTML) {}) |
To insert a node behind a specified element using an anonymous function |
| Before (content) |
Inserts a node before the outside of the specified element content |
| Before (function (index, HTML) {}) |
To insert a node before the outside of the specified element using an anonymous function |
| InsertAfter (content) |
Moves the specified node back to the content outside of the specified element |
| InsertBefore (content) |
Moves the specified node to the front of the content outside of the specified element |
code example:
$ (' div '). After (' <span> node </span> '); Insert span$ (' div ') after the sibling of the Div. After (function (index, HTML) {//Use anonymous function, same as return ' <span> node </span> ';}); $ (' div '). Before (' <span> node </span> '); Insert span$ (' div ') before the sibling of the Div. Before (function (index, HTML) {//Use anonymous function, same as return ' <span> node </span> ';}); $ (' span '). InsertAfter (' div '); Move the span element to the back of $ (' span ') outside the DIV element. insertbefore (' div '); Move the span element to the front of the DIV elementthree. Parcel Nodes
JQuery Wrapping a node is the meaning of using a string code to include the code of the specified element.
| Method name |
Describe |
| Wrap (HTML) |
Wraps a layer of HTML code into the specified element |
| Wrap (Element) |
Wraps a layer of DOM object nodes to a specified element |
| Wrap (function (index) {}) |
Wrap a layer of custom content into a specified element using an anonymous function |
| Unwrap () |
Removes the contents of a specified element package |
| Wrapall (HTML) |
Wrap all the elements together in HTML |
| Wrapall (Element) |
Wrap all the elements together with a DOM object |
| Wrapinner (HTML) |
Wraps a layer of HTML into the child content of the specified element |
| Wrapinner (Element) |
Wraps a layer of DOM object nodes into the child content of the specified element |
| Wrapinner (function (index) {}) |
Wrapping a layer of child content of a specified element with an anonymous function |
code example:
$ (' div '). Wrap (' <strong></strong> ');//wrap a layer of strong$ on the outer div ( ' div '). Wrap (' <strong>123</strong> '); The elements of the package can take content $ (' div '). Wrap (' <strong><em></em></strong> '); Wrap multiple elements $ (' div '). Wrap ($ (' strong '). Get (0)); You can also wrap a native dom$ (' div '). Wrap (Document.createelement (' strong ')); Temporary native dom$ (' div '). Wrap (function (index) {///anonymous function return ' <strong></strong> ';}); $ (' div '). Unwrap (); Remove a layer of package content, multiple (' div ') to be removed. Wrapall (' <strong></strong> '); Only one layer of strong$ (' div ') is wrapped outside all Div. wrapall ($ (' strong '). Get (0)); Ibid. $ (' div '). Wrapinner (' <strong></strong> '); Wrap child elements Content $ (' div '). Wrapinner ($ (' strong '). Get (0)); DOM node $ (' div '). Wrapinner (function () {///anonymous functions return ' <strong></strong> ';}); Note: The difference between. Wrap () and. Wrapall () is that each element is treated as a separate body, containing a layer of outer layers respectively, which takes all elements as a whole as a single body, containing only one layer of outer layers. Both of these are contained in the outer layer, while. Wrapinner () is contained within the inner layers.
Four Node operations
In addition to creating, inserting, and wrapping nodes, JQuery provides some common methods for node operations: copying, replacing, and deleting nodes.
Copy the node $ (' body '). Append ($ (' div '). Clone (True)); Copy a node to add to HTMLNote: The Clone (true) parameter can be null, which means that only elements and content are copied, and the event behavior is not replicated. In addition to the true parameter, the event handling behavior that accompanies this element is also duplicated.
Delete the node $ (' div '). Remove (); Delete div element directlyNote: When the. Remove () parameter is removed, the element specified by the preceding object selector is deleted. and. Remove () can also take a selector parameter, such as: $ (' div '). Remove (' #box '); Delete only the Id=box div.
The delete node that holds the event $ (' div '). Detach (); Preserving the deletion of event behaviorNote: the. Remove () and. Detach () are both delete nodes, and after the deletion itself the method can return the currently deleted node object, but the difference is that the former does not preserve the event behavior while recovering, while the latter retains it.
Empty the node 2$ (' div '). empty (); Delete the contents of the node 3//replace node 4$ (' div '). ReplaceWith (' <span> node </span> '); Replace the div with the span element 5$ (' <span> node </span> '). ReplaceAll (' div '); DittoNote: When a node is replaced, the event behavior that it contains disappears.
Article from: http://www.5imoban.net/jiaocheng/jquery/2014/0611/659.html
Query node operation, jquery insertion node, jquery delete node, jquery dom operation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
