after()与insertAfter()实例

来源：互联网发布：知乎 app交互设计分析编辑：程序博客网时间：2024/06/08 00:34

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

效果：

0 0