jQuery克隆节点

264 阅读1分钟

语法:
$(selector).clone(true|false);
参数:
参数不管是true还是false,都会克隆后代节点
true:会把事件一起克隆过去。
false:不会克隆事件。默认不写为false。

代码练习:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1,
			#div2 {
				width: 200px;
				height: 200px;
				border: 1px solid red;
				margin-bottom: 10px;
			}
		</style>
	</head>

	<body>
		<input type="button" value="克隆" id="btnClone" />
		<div id="div1">
			<span>span1</span>
			<p>p1</p>
		</div>
	</body>

</html>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
	$(function() {
		$("#btnClone").click(function() {
			//给id为div1的元素添加一个事件
			$("#div1").click(function() {
				alert("点击事件触发~");
			});
			var $cloneDiv = $("#div1").clone(true);
			//修改克隆节点的id
			$cloneDiv.attr("id", "div2");
			//把克隆的节点追加到body中
			$("body").append($cloneDiv);
		});
	});
</script>