JQuery-) clone DOM elements

The built-in clone function of jQuery can be used to clone DOM elements, and the clone function supportsChain call

The following is a simple clone usage.ulAnd add itbody.

 
 
 

  
  
list
  
  
list
  
  
list
  
  
list
 
 
<script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">$('ul').clone().appendTo('body');</script>

Using the clone function, we can perform more complex operations.

For example, clone an element and delete the cloned original element.

StillulFor example, follow the steps below to operate on it

Obtain all the li elements of ul (id = 'A'), add the click event to the li element, clone all the li elements, and add the cloned li elements to another ul (id = 'B ') delete the original ul (id = 'A') element from the element.

Sample Code:

 
 
 

  
  
list
  
  
list
  
  
list
  
  
list
 
 
 
 
<script type="text/javascript" src="jquery-1.11.1.js"></script><script type="text/javascript">$('ul#a li').click(function() {alert('List Item Clicked')}).parent().clone(true).find('li').appendTo('#b').end().end().end().remove();</script>xxx

After executionappendTo('#b')After that, three consecutive calls were made.end()Go back to the originalulAnd then delete

First end()The second operation to undo appendTo ('# B ') end()The third action to remove find ('lil ') end()Three clone (true) operations are revoked. end()After the execution parent()Result set, that is remove()Objects