jquery中的after、append、appendTo区别

1、after函数
定义和用法： after() 方法在被选元素后插入指定的内容。参考： http://keleyi.com/a/bjac/cfyxd60g.htm
语法： $(selector).after(content)

实例效果体验：http://keleyi.com/keleyi/phtml/jquery/13.htm

实例代码：

<html>
<head>
<title>jquery的after函数实例-柯乐义</title><base target="_blank" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<style>
.yuanlai_keleyi_com{border:1px solid black;padding:5px}
.a_keleyi_com{color:Blue;} a{color:Blue}
</style>
</head>
<body>
<br />
<span class="yuanlai_keleyi_com">柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a></span>
<br />
<br /><button id="after_keleyi_com">after函数</button>

<br /><br />
<a href="http://keleyi.com/keleyi/phtml/jquery/13a.htm">append函数</a> <a href="http://keleyi.com/keleyi/phtml/jquery/13b.htm">appendTo函数</a>
<script type="text/javascript">
$("#after_ke"+"leyi_com").click(function () {
$("span").after('<a href="http://keley'+'i.com" class="a_kel'+'eyi_com">这是after函数加上去的内容</a>')
})
</script>
</body>
</html>

结果如下：
柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a>

即：span标签后面多了一个a标签

2、append函数
定义和用法： append() 方法在被选元素的结尾（仍然在内部）插入指定内容。参考： http://keleyi.com/a/bjac/0vpch15n.htm
语法： $(selector).append(content)

实例效果体验： http://keleyi.com/keleyi/phtml/jquery/13a.htm

实例代码：

<html><head>
	<title>jquery的append函数实例-柯乐义</title><base target="_blank" />
	<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
	<style>
		.yuanlai_keleyi_com{border:1px solid black;padding:5px}
		.a_keleyi_com{color:Blue;} a{color:Blue}
	</style>
</head>
<body>
	<br />
	<span class="yuanlai_keleyi_com">柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a>。</span>
	<br /><br />

	<button id="after_keleyi_com">append函数</button>

	<br /><br />

	<a href="http://keleyi.com/keleyi/phtml/jquery/13.htm">after函数</a> <a  	href="http://keleyi.com/keleyi/phtml/jquery/13b.htm">appendTo函数</a>
	<script type="text/javascript">
		$("#after_ke" + "leyi_com").click(function () {
		$(".yuanlai_ke"+"leyi_com").append('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是append函数加上去的	内容</a>')
	})
	</script>
</body>
</html>

结果如下：
柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a>

即：span标签里面多了一个a标签

3、appendTo函数
定义和用法： appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。参考: http://keleyi.com/a/bjac/opnw2awa.htm
语法： $(content).appendTo(selector)

实例效果体验： http://keleyi.com/keleyi/phtml/jquery/13b.htm

实例代码：

<html><head>	<title>jquery的appendTo函数实例-柯乐义</title><base target="_blank" />	<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>	<style>		.yuanlai_keleyi_com{border:1px solid black;padding:5px}		a{color:Blue}		.a_keleyi_com{color:Blue;}	</style></head><body>	<br />	<span class="yuanlai_keleyi_com">柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a>。</span>	<br /><br />	<button id="after_keleyi_com">appendTo函数</button>	<br /><br />	<a href="http://keleyi.com/keleyi/phtml/jquery/13a.htm">append函数</a> <a  	href="http://keleyi.com/keleyi/phtml/jquery/13.htm">after函数</a> 	<script type="text/javascript">		$("#after_ke" + "leyi_com").click(function () {		$('<a href="http://keley' + 'i.com" class="a_kel' + 'eyi_com">这是appendTo函数加上去的内容	</a>').appendTo(".yuanlai_k" + "eleyi_com")		//这样的写法是不正确的: $(".yuanlai_k" + "eleyi_com").appendTo('<a href="http://keley' + 'i.com" class="a_kel' +  	'eyi_com">这是appendTo函数加上去的内容</a>')		})	</script></body></html>

结果如下：
柯乐义，这是span里的内容，keleyi.com。<a href="http://keleyi.com/a/bjac/2oncd079.htm">原文</a><a href="http://keleyi.com" class="a_keleyi_com">这是after函数加上去的内容</a>

即：span标签里面多了一个a标签

效果和append函数是一样，只不过它们的写法是反着来写的而已

appendTo函数的一个实际应用： http://keleyi.com/a/bjac/jp71q5jt.htm

秒客网

jquery中的after、append、appendTo区别

相关文章