使用jQuery内置的clone函数可以克隆DOM元素,而且clone函数支持链式调用
下例是clone的一个简单用法,它做了一个ul
的副本,并添加到body
中。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ul> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> <strong>$('ul').clone().appendTo('body');</strong> </script> </body> </html>
利用clone函数我们可以完成一些更加复杂的操作
比如,克隆一个元素,然后删除被克隆的原始元素
仍然以ul
为例,按照以下流程对其进行操作
代码示例如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <ul id="a"> <li>list</li> <li>list</li> <li>list</li> <li>list</li> </ul> <ul id="b"></ul> <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> </body> </html>xxx
在执行完appendTo(‘#b‘)
之后,连续调用了三次end()
回溯到原始的ul
元素,然后进行删除
end()
撤销了appendTo(‘#b‘)的操作end()
撤销了find(‘li‘)的操作end()
撤销了clone(true)的操作end()
执行完之后,回到了parent()
的结果集,也就是remove()
的作用对象jQuery -> 克隆DOM元素,布布扣,bubuko.com
原文地址:http://blog.csdn.net/feelang/article/details/26574025