jQuery -> 克隆DOM元素

浏览数：14 / 时间：2015年06月09日

使用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为例，按照以下流程对其进行操作

获取ul(id=‘a‘)的所有li元素
为li元素添加click事件
克隆所有的li元素
把克隆的li元素添加到另一个ul(id=‘b‘)元素中
删除原始的ul(id=‘a‘)元素

代码示例如下

<!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元素，然后进行删除