在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>效果：
5266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
