jquery复制dom节点的方法总结

栏目: 编程语言 发布于: 2014-05-03 12:47:45

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节点的方法总结
  • jquery如何为动态创建的节点绑定事件
  • JavaScript 复制功能代码,兼容多浏览器
  • 利用js禁止浏览器直接选择复制文章内容的办法
  • JavaScript删除DOM节点
  • jquery当前节点之前插入节点
  • JQuery DOM 插入节点方法总结
  • js 限制文本框只能输入数字(包括小数点数字)
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。
转载请注明:文章转载自 [http://www.php230.com]
本文标题:jquery复制dom节点的方法总结
IT技术书籍推荐:
Python学习手册(第4版)
Python学习手册(第4版)
鲁特兹 (Mark Lutz) (作者), 李军 (译者), 刘红伟 (译者), 等 (译者)
《Python学习手册(第4版)》内容简介:学习Python的主要内建对象类型:数字、列表和字典。使用Python语句创建和处理对象,并且学习Python的通用语法模型。使用函数构造和重用代码,函数是Python的基本过程工具。学习Python模块:封装语句、函数以及其他工具,以便构建较大的组件。学习Python的面向对象编程工具,用于组织程序代码。学习异常处理模型,以及用于编写较大程序的开发工具。了解高级Python工具,如装饰器、描述器、元类和Unicode处理等。
最新互联网资讯
互联网资讯