在jquery中,after()与insertAfter()函数有着相同的功能,能够完成相同的任务,即添加文本或者html内容到匹配元素的后面,其主要的区别在于语法上的区别。
例如:
<divclass="greyBox">I'm a ipman</div>
<divclass="greyBox">I'm a ipman 2</div>
$('.greyBox').after("<divclass='redBox'>Iron man</div>");
$("<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>
效果: