jquery如何复制dom节点?jquery节点复制多种方法

发布时间:2020-01-30编辑:脚本学堂
本文介绍了jquery复制dom节点的多种方法,jquery复制节点数据经常会用到,这里分享几个jquery实现节点复制的例子。

jquery复制dom节点

假设页面html代码:
 

复制代码 代码示例:
<body>
<div id="com">http://www.jb200.com/jquery/192.html</div>
<p>jquery dom 操作示例<span>-脚本学堂</span></p>
<div id="jbxue"></div>
</body>

如果需要将<p>标签内的内容复制到id="com"区域块内,则可以:
 

$('#com').append( $('p').html());

复制操作完成后html代码将变为:
 

<body>
<div id="com">http://www.jb200.com/jquery/192.htmljquery dom 操作示例<span>-脚本学堂</span></div>
<p>jquery dom 操作示例<span>-脚本学堂</span></p>
<div id="jbxue"></div>
</body>

注意以上仅是复制了<p>标签的内容,如果需要连同<p>标签复制一份到id="com"区域块内,则可以:
 

$('#com').append( $('p').clone());
//或者
$('#com').append( $('p').clone(true));

经过以上操作,html代码:
 

<body>
<div id="com">http://www.jb200.com/jquery/192.html<p>jquery dom 操作示例<span>-脚本学堂</span></p></div>
<p>jquery dom 操作示例<span>-脚本学堂</span></p>
<div id="jbxue"></div>
</body>
 

注意:以上clone方法传了个参数true的作用是在复制元素的同时复制元素中所绑定的事件。因为以上代码中没有绑定事件,所以是否带true没有影响。
若复制的节点中有js事件操作,并且希望复制出来的一份也保留同原来母本一样具有事件操作的话,那么在clone方法中加个true将可以满足你的需求。

补充:
对dom节点的操作方法常用:append,appendTo,prepend,prependTo,after,before,insertAfter,insertBefore等方法。