jQuery克隆节点
2022-03-14 本文已影响0人
马佳乐
语法：
$(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>
