在做一个项目时,需要dom节点移动,如以下代码:
. 代码如下:
<p></p>
<p></p>
. 代码如下:
$('p').append($('p'))
. 代码如下:
$('p').append( $('p').html() )
如果只是复制一份到p标签里,原来的标签还保留着,那么可以这么写:
. 代码如下:
$('p').append( $('p').clone(true))
. 代码如下:
$(function(){
$(".nm_ul li").click(function(){
$(this).clone(true).appendto(".nm_ul"); // 复制当前点击的节点,并将它追加到<ul>元素
})
});
在clone()方法中传递了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。如果不希望事件也被复制,则可以这么写:
. 代码如下:
$('p').append( $('p').clone())
. 代码如下:
<button>move me!</button>
<p id="box"></p>
实例
$("button").click(function(){
$(this).appendto($("#box"));
//或者用append
$("#box").append(this);
});
. 代码如下:
<p class="nm_p" title="欢迎访问脚本之家馆" >欢迎访问脚本之家图书馆</p>
<ul class="nm_ul">
<li title='php魔法'>简单易懂的php魔法</li>
<li title='c魔法'>简单易懂的c魔法</li>
<li title='javascript魔法'>简单易懂的javascript魔法</li>
<li title='jquery'>简单易懂的jquery魔法</li>
</ul>
. 代码如下:
$(function(){
$(".nm_ul li").click(function(){
$(this).clone(true).appendto(".nm_ul"); // 复制当前点击的节点,并将它追加到<ul>元素
})
});
. 代码如下:
$("ul li").click(function(){
$(this).clone(true).appendto("ul"); // 注意参数true
//可以复制自己,并且他的副本也有同样功能。
})
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
网友评论