首页 > 代码库 > jQuery -> 克隆DOM元素
jQuery -> 克隆DOM元素
使用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=http://www.mamicode.com/"jquery-1.11.1.js"></script>>
利用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=http://www.mamicode.com/"jquery-1.11.1.js"></script>>
在执行完appendTo(‘#b‘)之后，连续调用了三次end()回溯到原始的ul元素，然后进行删除
- 第一个
end()撤销了appendTo(‘#b‘)的操作 - 第二个
end()撤销了find(‘li‘)的操作 - 第三个
end()撤销了clone(true)的操作 - 三个
end()执行完之后，回到了parent()的结果集，也就是remove()的作用对象
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。