Practical dom operation cases for moving and copying DOM nodes using jQuery

This article briefly introduces jQuery's implementation of moving and copying dom node programs. For more information, see.

When creating a project, you need to move the dom node, as shown in the following code:

Copy codeThe Code is as follows: <div> </div>
<P> </p>

You need to move the p tag to the div tag. After testing, we found that it is very convenient to move the dom node in jQuery:Copy codeThe Code is as follows: $ ('div '). append ($ ('P '))

In this way, you can move the p tag to the div tag. Do not write it like this:Copy codeThe Code is as follows: $ ('div '). append (Response ('p'{.html ())

In this way, the content in the p tag is copied to the div tag.

If you just copy a copy to the div tag and the original tag is retained, you can write it like this:

Copy codeThe Code is as follows: $ ('div '). append ($ ('P'). clone (true ))

ExampleCopy codeThe Code is as follows: $ (function (){
$ (". Nm_ul li"). click (function (){
$ (This). clone (true). appendTo (". nm_ul"); // copy the currently clicked node and append it to the <ul> element.
})
});

When the clone parameter is set to true, you can copy the events bound to the button together to the new button.

In the clone () method, a parameter true is passed, which means that the events bound to the element are copied while copying the element. Therefore, the copy of this element also has the copy function. If you do not want the event to be copied, you can write it as follows:

Copy codeThe Code is as follows: $ ('div '). append ($ ('P'). clone ())

Mobile Node
You can use the jq internal and external insertion methods (append, appendTo, prepend, prependTo, after, before, insertAfter, insertBefore) to move a node on the page to another place ), move the selected node directly.Copy codeThe Code is as follows: <button> Move Me! </Button>
<Div id = "box"> </div>
Instance
$ ("Button"). click (function (){
$ (This). appendTo ($ ("# box "));
// Or append
$ ("# Box"). append (this );
});

Copying a node is also one of the common DOM operations. For example, you can click the "select" button at the bottom of a product to purchase a product for many shopping websites, you can also drag the item and place it in the shopping cart. This product drag function is to use the copy node to copy the node element of the selected product once, and move it with the mouse to achieve the shopping effect.
The html dom structure is as follows:Copy codeThe Code is as follows: <p class = "nm_p" title = "welcome to the library"> welcome to the library </p>
<Ul class = "nm_ul">
<Li title = 'php mage'> simple PHP magic </li>
<Li title = 'C magic '> easy-to-understand C magic </li>
<Li title = 'javascript magine'> simple and easy-to-understand JavaScript magic </li>
<Li title = 'jquery '> simple and easy-to-understand JQuery magic </li>
</Ul>

If you need to copy another <li> element after clicking the <li> element, you can use the clone () method to complete the operation. Let's take a look at the effect:
Effect demonstration
Welcome to the library
Simple PHP magic
Easy-to-understand C magic
Easy-to-understand JavaScript magic
Simple and easy-to-understand JQuery magic
The JQuery code is as follows:Copy codeThe Code is as follows: $ (function (){
$ (". Nm_ul li"). click (function (){
$ (This). clone (true). appendTo (". nm_ul"); // copy the currently clicked node and append it to the <ul> element.
})
});

After you click any item on the page, the new node of the item appears at the bottom of the list.
After a node is copied, the new elements do not have any behavior. If you want to copy a new element (in this example, click an event), you can use the following JQuery code:Copy codeThe Code is as follows: $ ("ul li"). click (function (){
$ (This). clone (true). appendTo ("ul"); // note that the parameter is true.
// You can copy yourself, and its copy also has the same function.
})