jQuery DOM元素添加删除

remove()和detach()的区别：

$('div').click(function(){alert(123);});var $div = $('div').detach();$('body').append( $div );//使用detach()方法删除，再添加后，仍具有点击事件。

$('div').click(function(){alert(123);});var $div = $('div').remove();$('body').append( $div );//使用remove()方法删除，在添加后，不具有点击事件。

clone():

$('div').click(function(){alert(123);});var cloneDiv = $('div').clone();//没有参数时，复制的div不具有点击事件$('body').append( cloneDiv );

$('div').click(function(){alert(123);});var cloneDiv = $('div').clone(true);//参数为true时，复制的div拥有点击事件$('body').append( cloneDiv );});

$('div').click(function(){alert(123);});$('span').click(function(){alert(456);});var cloneDiv = $('div').clone(true,false);//复制的子元素span不具有点击事件$('body').append( cloneDiv );

after(),before(),append()和prepend():

<div>div<span>span</span></div>

$('div').before($('span'));

经过before()后：有剪切，复制操作

<span>span</span><div>div</div>

如果有多个div：

<div>div<span>span</span></div><div></div>

$('div').before($('span'));

结果：

<span>span</span><div>div</div><span>span</span><div></div>

append()：

<span>span</span>

$('span').append( '<div>123</div>' );

结果：

<span>span<div>123</div></span>

<span>span</span><div>123</div>

$('span').append( $('div') );

结果：有剪切，复制操作

<span>span<div>123</div></span>

$('div').append( $('span') );$('span').appendTo( $('div') );//两者结果相同

$('div').append( $('span') ).css('border','1px red solid');//css设置对象是div$('span').appendTo( $('div') ).css('border','1px red solid');//css设置对象是span

wrapAll():

<span>span</span><span>span</span><p>p</p><span>span</span>

$('span').wrapAll('<div>')

<div><span>span</span><span>span</span><span>span</span></div><p>p</p>

wrap():

<span>span</span><span>span</span><span>span</span>

$('span').wrap('<div>')

结果：

<div><span>span</span></div><div><span>span</span></div><div><span>span</span></div>

wrapInner():

<span>span</span><span>span</span><span>span</span>

$('span').wrapInner('<div>');

结果：

<span><div>span</div></span><span><div>span</div></span><span><div>span</div></span>

unwrap():

<div><div><span>span</span></div></div><div><span>span</span></div><div><span>span</span></div>

$('span').unwrap();

结果：

<div>     <span>span</span></div><span>span</span><span>span</span><span>span</span>