JQuery's method of copying DOM nodes_jquery

The example in this article describes how JQuery copies DOM nodes. Share it with everyone for your reference. The specific analysis is as follows:

Copying nodes is also one of the commonly used DOM operations, such as the effect of many shopping websites. Users can not only click the "Select" button below the product to purchase the corresponding product, but also drag the product with the mouse and place it on the in shopping cart. This product dragging function uses a copy node to copy the node element of the product selected by the user and move it with the mouse to achieve the shopping effect.

HTML DOM structure is as follows:

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
  <li title='PHP编程'>简单易懂的PHP编程</li>
  <li title='C编程'>简单易懂的C编程</li>
  <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
  <li title='JQuery'>简单易懂的JQuery编程</li>
</ul>

If you need to copy another

element after clicking the

element, you can use the clone() method to complete it.

The JQuery code is as follows:

$(function(){
  $(".nm_ul li").click(function(){
    $(this).clone(true).appendTo(".nm_ul");
    // 复制当前点击的节点，并将它追加到<ul>元素
  }) 
});

After clicking any item on the page, a new node for that item will appear at the bottom of the list.

After copying a node, the copied new element does not have any behavior. If you need the new element to also have copy functionality (click event in this case), you can use the following JQuery code:

$("ul li").click(function(){ 
 $(this).clone(true).appendTo("ul"); // 注意参数true 
 //可以复制自己，并且他的副本也有同样功能。 
})

A parameter true is passed in the clone() method, which means that when copying the element, the events bound to the element are also copied. So the copy of the element also has copy functionality (in this case the click event).

I hope this article will be helpful to everyone’s jQuery programming.