May
23
2013
jquery复制dom节点的方法总结
作者：
绝缘体.. 发布：
2013-05-23 16:20 分类：
未分类 阅读：
抢沙发
jquery复制dom节点可谓是页面dom操作中经常会碰到的，一些特效里面也经常会涉及到各种dom复制操作，下面作者就如何使用jquery复制dom节点做一个小结，以免遗忘。同时也希望能够帮助到有需要的朋友。下面还是通过示例来说明问题。
假设页面html代码如下：
<body> <div id="com">http://www.phpernote.com/jquery/192.html</div> <p>jquery dom 操作示例<span>-php程序员教程网</span></p> <div id="phpernote"></div> </body>
如果需要将<p>标签内的内容复制到id=”com”区域块内，则可以：
$('#com').append( $('p').html());
复制操作完成后html代码将变为如下：
<body> <div id="com">http://www.phpernote.com/jquery/192.htmljquery dom 操作示例<span>-php程序员教程网</span></div> <p>jquery dom 操作示例<span>-php程序员教程网</span></p> <div id="phpernote"></div> </body>
注意以上仅是复制了<p>标签的内容，如果需要连同<p>标签复制一份到id=”com”区域块内，则可以：
$('#com').append( $('p').clone());
或者
$('#com').append( $('p').clone(true));
经过以上操作，html代码将会是如下样子：
<body> <div id="com">http://www.phpernote.com/jquery/192.html<p>jquery dom 操作示例<span>-php程序员教程网</span></p></div> <p>jquery dom 操作示例<span>-php程序员教程网</span></p> <div id="phpernote"></div> </body>
注意以上clone方法传了个参数true的作用是在复制元素的同时复制元素中所绑定的事件。因为以上代码中没有绑定事件，所以是否带true没有影响。但如果你复制的节点中有js事件操作并且你希望复制出来的一份也保留同原来母本一样具有事件操作的话，那么在clone方法中加个true将可以满足你的需求。
这里补充说明一下对dom节点的操作方法常用的有 append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore 这些方法。
微信扫一扫，打赏作者吧～
jquery复制dom节点的方法总结：等您坐沙发呢！
发表评论
