JQuery DOM node operation

DOM Is a very important function of the node model, which is DOM in the "M" . The meta-structure in the page corresponds to each other through this node model, and we only need to create, Insert, replace, clone, delete, and so on, the element operations of some columns through these node relationships.

A Create a Node

To make the page more intelligent, sometimes we want to dynamically add an element tag on the HTML structure page, so the first thing to do before inserting is to create the node.

$ (' div '). Append (' <strong> node </strong> '); Insert the strong node  $ (' div ') inside the div. append (function (index,html) {     //using an anonymous function to insert a node, HTML is the original node     return ' <strong > Node </strong> ';}); $ (' span '). AppendTo (' div '); Tell the span node to move into the div node within $ (' span '). AppendTo ($ (' div ')); Ibid. $ (' div '). prepend (' <span> node </span> '); Insert span into front of $ (' div ') inside div. append (function (index,html) {     //Use anonymous function,     return ' <span> node </span> ‘; }); $ (' span '). Prependto (' div '); Move span into front of $ (' span ') inside the Div. prependto ($ (' div ')); Ditto

　　

$ (' div '). After (' <span> node </span> '); Insert the      span   $ (' div ') after the sibling of the Div. After (function (index,html) {//Use anonymous function,     return ' <span> node </ Span> '; }); $ (' div '). Before (' <span> node </span> '); Insert span $ (' div ') before the sibling node of the Div   . Before (function (index,html) {//Use anonymous function,     return ' <span> node </span > '; });   $ (' span '). InsertAfter (' div '); Move the span element to the rear of the DIV element    (' span '). InsertBefore (' div ');//move the span element to the front of the DIV element  

　　

Three Parcel nodes

JQuery provides a series of methods for wrapping nodes, what does the parcel node mean? is actually using string code to include the code of the specified element.

$ (' div '). Wrap (' <strong></strong> '); Wrap a layer strong $ (' div ') in the outer div  . Wrap (' <strong>123</strong> ');//package element can take content   $ (' div '). Wrap (' < Strong><em></em></strong> '); Wrap multiple elements   $ (' div '). Wrap ($ (' strong '). Get (0)), or you can wrap a native DOM   $ (' div '). Wrap (Document.createelement (' strong ‘)); Temporary native DOM   $ (' div '). Wrap (function (index) {///anonymous functions       return ' <strong></strong> ';   });   $ (' div '). Unwrap (); Remove a layer of package content, multiple removal of   $ (' div '). Wrapall (' <strong></strong> ');//All div is wrapped only one layer strong  $ (' div '). Wrapall ($ (' strong '). Get (0)); Ibid.   $ (' div '). Wrapinner (' <strong></strong> ');//wrap child element 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 HTML  Note: The Clone (true) parameter can be empty, 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 node   $ (' div '). Remove ();//delete div element directly  Note: remove () removes the element specified by the preceding object selector without parameters. and. Remove () can also take a selector parameter, such as: $ (' div '). Remove (' #box '); Delete only the Id=box div.  Delete node   $ (' div ') that holds the event. Detach ();//Preserve the deletion of event behavior  Note: 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 retain the event behavior while recovering, while the latter retains it. Empty   the node $ (' div '). empty ();//Delete the contents of the node  //Replace the node   $ (' div '). ReplaceWith (' <span> node </span> '); Replace the div with the span element   $ (' <span> node </span> '). ReplaceAll (' div ');//Ibid.  

　　

Note: When a node is replaced, the event behavior that it contains disappears.

JQuery DOM node operation