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
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.