1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>jQ复制元素节点</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 body{padding: 100px;font-size: 12px;} 9 #box{border: solid 1px #ccc;overflow: hidden;} 10 .small_box{width: 50px;height: 50px;background: orange;margin: 3px;float: left;} 11 </style> 12 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> 13 <script> 14 $(function(){ 15 $(".small_box").click(function(){ 16 $(this).clone(true).appendTo("#box"); 17 }); 18 }); 19 </script> 20 </head> 21 <body> 22 <p>点击div色块</p> 23 <div id="box"> 24 <div class="small_box"></div> 25 </div> 26 </body> 27 </html>
PS：clone()方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要在复制时将该元素的全部行为也进行复制，可以通过clone(true)实现。