使用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