Method for copying a DOM node using JQuery _ jquery

This article describes how to copy a DOM node by JQuery, and describes how to use the clone and appendTo methods in jQuery. For more information, see the following example. Share it with you for your reference. The specific analysis is as follows:

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:

Welcome to my home
 
 
  
  
  
Simple PHP programming
  
  
  
Easy-to-understand C Programming
  
  
  
Simple and easy-to-understand JavaScript programming
  
  
  
Simple and easy-to-understand JQuery Programming
 
 

If you click

Copy another element

Element, which can be completed using the clone () method.

The JQuery code is as follows:

$ (Function () {$ (". nm_ul li "). click (function () {$ (this ). clone (true ). appendTo (". nm_ul "); // copy the node currently clicked and append it
  
  

   
   
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:

$ ("Ul li "). click (function () {$ (this ). clone (true ). appendTo ("ul"); // note that the parameter is true // you can copy yourself, and its copy has the same function. })

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 (in this example, click event ).

I hope this article will help you with jQuery programming.