Practical DOM operation cases for moving and copying dom nodes with jQuery

Practical DOM operation cases for moving and copying dom nodes with jQuery_jquery

WBOY

Release： 2016-05-16 17:46:32

Original

949 people have browsed it

This article briefly introduces the program implementation of jQuery moving and copying dom nodes. Friends who need to learn can refer to it.

When working on a project, you need to move the DOM node, such as the following code:

Copy the code The code is as follows:

You need to move the p tag into the div tag. After testing, it was found that It is very convenient to move dom nodes in jQuery:

Copy the code The code is as follows:

$('div ').append($('p'))

In this way, you can move the p tag into the div tag. Never write it like this:

Copy code The code is as follows:

$('div').append( $('p').html() )

This just copies the content in the p tag to the div tag.

If you just copy a copy into the div tag and the original tag is still retained, you can write like this:

Copy code The code is as follows:

$('div').append( $('p').clone(true))

Example

Copy code The 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  element 
}) 
});

And when the clone parameter is set to true, the events bound to the button can also be copied to the new button

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. Therefore, a copy of the element also has copy function. If you don’t want the event to be copied, you can write:

Copy code The code is as follows:

$('div').append( $('p').clone())

Move node
To move a node on the page to another place, you can use jq Internal and external insertion methods (append, appendTo, prepend, prependTo, after, before, insertAfter, insertBefore), you can move the selected node directly by passing it in

copy Code The code is as follows:

Instance
$("button").click(function(){
$(this).appendTo($("#box"));
//or use append
$("#box").append(this);
});

Copying nodes is also one of the commonly used DOM operations, such as the effects of many shopping websites. Users can not only Purchase the corresponding product by clicking the "Select" button below the product, or drag the product with the mouse and put it into the 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:

Copy code The code is as follows:

Welcome to the Script House Library

Easy-to-understand PHP Magic

Easy-to-understand C Magic

Simple and easy-to-understand JavaScript magic

Simple and easy-to-understand JQuery magic

If you need to copy another

element after clicking the

element, you can use the clone() method to complete it. Let’s take a look at the effect first:
Effect Demonstration
Welcome to Script Home Library
Easy-to-understand PHP magic
Easy-to-understand C magic
Easy-to-understand JavaScript magic
Easy-to-understand JQuery magic
The JQuery code is as follows:

Copy code The 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  element 
} ) 
}); 

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:

Copy code The code is as follows:

 
$("ul li").click(function(){ 
$(this).clone(true).appendTo("ul"); // Pay attention to the parameters true 
//Can copy itself, and its copies also have the same function 
}) 