Clone node is a common operation of DOM. jQuery provides a clone method, which is specially used to deal with dom cloning.
.clone() method deeply copies all matching element sets, including All matching elements, subordinate elements of matching elements, and text nodes.
The clone method is relatively simple, just clone the node, but it should be noted that if the node has other processing such as events or data, we need to pass a Boolean value ture through clone(ture) to specify, so that it is not just To clone a simple node structure, you also need to clone the accompanying events and data.
For example:
HTML部分
<div></div>
JavaScript部分
$("div").on('click', function() {//执行操作})
//clone处理一
$("div").clone() //只克隆了结构，事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆 It is so simple to use. When using cloning, we need to know additional details:
When using the clone() method, we can modify the cloned element or element content before inserting it into the document, such as the code on the right: $(this).clone().css('color', 'red') adds a color
By passing true, all event handlers bound to the original element are copied to the cloned element
The clone() method is a jQuery extension. Can only handle events and data bound through jQuery
Objects and arrays within element data (data) will not be copied and will continue to be shared by cloned elements and original elements. All data for deep copying needs to be copied manually.
Let’s write an example below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<style>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
</style>
</head>
<body>
<div class="left">
<div class="aaron1">点击,clone浅拷贝</div>
<div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
</div>
<script type="text/javascript">
//只克隆节点 //不克隆事件
$(".aaron1").on('click', function() {
$(".left").append( $(this).clone().css('color','red') )
})
</script>
<script type="text/javascript">
//克隆节点 //克隆事件
$(".aaron2").on('click', function() {
console.log(1)
$(".left").append( $(this).clone(true).css('color','blue') )
})
</script>
</body>
</html>Look at the above code, when I click on the first div, it is copied. , but when you click to copy it, it has no effect. You can try it
Next Section