下面来看一下jquery的节点克隆操作,请看以下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
</head>
<body>
<div id="box">
<span id="span1" name="spanname" value="spanvalue" class="spanclass" sx="spansx">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
<div id="box1"></div>
<div id="box2">
</div>
</body>
<script>
$('#span2').click(function(){
console.log('点了span2')
});
var a='<a href="www.baidu.com">向父元素添加子元素到前</a>';
var span2=$('#span2').clone(true);//参数如果为true表示复制元素及事件
$('#box').append(span2);
</script>
</html>
以上,我们先给id为span2的span标签绑定了一个点击事件,然后将span2克隆了一份,又添加到了id为span3的span标签之后。
此时的元素结构如下:
由于在克隆时,我们给clone命令传参为true,表示连同节点的事件一同复制。
此时我们点击原来的span2和克隆出来的span2,都会触发click事件。
如下:
请大家可以把以上代码复制出来测试一下以加深印象。
|