How jquery replicates DOM nodes _jquery

The example in this article describes the way jquery replicates DOM nodes. Share to everyone for your reference. The specific analysis is as follows:

Replication nodes are also one of the most common DOM operations, such as the effects of many shopping sites, where users can buy products not only by clicking the "Select" button below the product, but also by dragging the item by the mouse and placing it in the cart. This product drag function is to use the replication node, the user selected items in the node element copy once, and follow the mouse to move, so as to achieve the shopping effect.

The HTML DOM structure is as follows:

<p class= "nm_p" title= "Welcome to Cloud Communities" > Welcome to Cloud-Habitat </p>
<ul class= "Nm_ul" >
  <li title= ' PHP programming ' > Easy to understand PHP programming </li>
  <li title= ' C programming ' > Easy to understand C programming </li>
  <li title= ' JavaScript programming ' > Easy to understand JavaScript programming </li>
  <li title= ' jquery ' > Easy to understand jquery programming </li>
</ul>

If you need to copy a <li> element after clicking the <li> element, you can do so using the Clone () method.

The jquery 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 you click a random item in the page, the new node for the item appears at the bottom of the list.

After a node is replicated, the new element being copied does not have any behavior. If you need a new element that also has replication capabilities (in this case, click events), you can use the following jquery code:

$ ("ul Li"). Click (function () { 
 $ (this). Clone (True). Appendto ("ul");//Note the parameter true 
 //can copy yourself, and his copy has the same function. 
})

A parameter true is passed in the Clone () method, meaning that the event that is bound in the element is replicated while copying the element. Therefore, the copy of the element also has a copy function (in this case, click the event).

I hope this article will help you with your jquery programming.