How to copy a DOM node using JQuery, jquerydom Node

How to copy a DOM node using JQuery, jquerydom Node

This document describes how to copy a DOM node using JQuery. 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:

<P class = "nm_p" title = "Welcome to "> welcome to </p> <ul class = "nm_ul"> <li title = 'php programming'> simple and easy-to-understand PHP programming </li> <li title = 'C programming '> simple and easy-to-understand C Programming </li> <li title = 'javascript programming'> simple and easy-to-understand javaScript programming </li> <li title = 'jquery '> simple and easy-to-understand JQuery programming </li> </ul>

If you need to copy another <li> element after clicking the <li> element, you can use 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 to <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:

$ ("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.