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()方法删除，在添加后，不具有点击事件。

remove()中添加参数

$('div').remove('.box');//参数表示筛选条件，删除div中，带有类box的div

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 );

实现类似购物车的功能：

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
<script type="text/javascript">
	$('ul li').click(function(){  
        $(this).clone(true).appendTo('ul');
    }); 
</script>

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标签剪切复制到一个div标签中

<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标签包裹一个div标签

<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>

replaceWith()和replaceAll()

<p>html</p>
<p>javaScript</p>
<p>css</p>
<script type="text/javascript">
//	$('p').replaceWith('<strong>Jquery</strong>');
	$('<strong>Jquery</strong>').replaceAll('p')
</script>