after()与insertAfter()实例

最新推荐文章于 2021-08-17 11:51:28 发布

eternity668

最新推荐文章于 2021-08-17 11:51:28 发布

阅读量1.4k

点赞数

分类专栏： jquery 文章标签： jquery翻译

jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

在jquery中，after()与insertAfter()函数有着相同的功能，能够完成相同的任务，即添加文本或者html内容到匹配元素的后面，其主要的区别在于语法上的区别。

例如：

<divclass="greyBox">I'm a ipman</div>

<divclass="greyBox">I'm a ipman 2</div>

1. $(‘selector’).after(‘new content’);

$('.greyBox').after("<divclass='redBox'>Iron man</div>");

2. $(‘newcontent’).insertAfter(‘selector’);

 $("<divclass='redBox'>Iron man</div>").insertAfter('.greyBox');

结果如下：

<divclass="greyBox">

   I'm a ipman

</div>

<divclass='redBox'>Iron man</div>

<divclass="greyBox">

   I'm a ipman 2

</div>

<divclass='redBox'>Iron man</div>

具体实例代码：

<html>
	<head>
		<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
		<style type="text/css">
			.greBox{
				padding:8px;
				background:grep;
				margin-bottom:8px;
				width:300px;
				height:100px;
				}
				.redBox{
					padding:8px;
					background:red;
					margin-bottom:8px;
					width:300px;
					height:100px;
					
					}
			</style>
	</head>
	<body>
		<h1>jquery after()andinsertAfter() example </h1>
		<div class="greyBox">ip man</div>
		<div class="greyBox">ip man2</div>
		<p>
			<button id="after">after()</button>
			<button id="insertAfter">insertAfter()</button>
			<button id="reset">reset</button>
		</p>
		<script type="text/javascript">
			$("#after").click(function(){
				
				$('.greyBox').after('<div class="redBox">iron man</div>');
				
				});
				$("#insertAfter").click(function(){
					$('<div class="redBox">iron man</div>').insertAfter('.greyBox');
					
					});
					$("#reset").click(function(){
						
						location.reload();
						
						});
			
			</script>
	</body>
</html>

效果：