jquery复制dom节点可谓是页面dom操作中经常会碰到的，一些特效里面也经常会涉及到各种dom复制操作，下面作者就如何使用jquery复制dom节点做一个小结，以免遗忘。同时也希望能够帮助到有需要的朋友。下面还是通过示例来说明问题。
假设页面html代码如下：
- <body>
- <div id="com">http://www.daimajiayuan.com/sitejs-17155-1.html</div>
- <p>jquery dom 操作示例<span>-代码家园</span></p>
- <div id="phpernote"></div>
- </body>
如果需要将<p>标签内的内容复制到id="com"区域块内，则可以：
- $('#com').append( $('p').html());
复制操作完成后html代码将变为如下：
- <body>
- <div id="com">http://www.daimajiayuan.com/sitejs-17155-1.htmljquery dom 操作示例<span>-代码家园</span></div>
- <p>jquery dom 操作示例<span>-代码家园</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.daimajiayuan.com/sitejs-17155-1.html<p>jquery dom 操作示例<span>-代码家园</span></p></div>
- <p>jquery dom 操作示例<span>-代码家园</span></p>
- <div id="phpernote"></div>
- </body>
注意以上clone方法传了个参数true的作用是在复制元素的同时复制元素中所绑定的事件。因为以上代码中没有绑定事件，所以是否带true没有影响。但如果你复制的节点中有js事件操作并且你希望复制出来的一份也保留同原来母本一样具有事件操作的话，那么在clone方法中加个true将可以满足你的需求。
这里补充说明一下对dom节点的操作方法常用的有 append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore 这些方法。
这里有JQuery DOM插入节点方法总结可以参照！
零七网部分新闻及文章转载自互联网，供读者交流和学习，若有涉及作者版权等问题请及时与我们联系，以便更正、删除或按规定办理。感谢所有提供资讯的网站，欢迎各类媒体与零七网进行文章共享合作。
