jQuery使用before()和after()在元素前后添加内容的方法


Posted in Javascript onMarch 26, 2015

本文实例讲述了jQuery使用before()和after()在元素前后添加内容的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#btn1").click(function(){
  $("img").before("<b>Before</b>");
 });
 $("#btn2").click(function(){
  $("img").after("<i>After</i>");
 });
});
</script>
</head>
<body>
<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">
<br><br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 得到变量类型的函数
May 19 Javascript
jquery 插件学习(二)
Aug 06 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
jquery实现简单手风琴菜单效果实例
Jun 13 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
AngularJS select设置默认值的实现方法
Aug 25 Javascript
vue服务端渲染的实例代码
Aug 28 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 Javascript
简单学习5种处理Vue.js异常的方法
Jun 17 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 #Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 #Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 #Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 #Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 #Javascript
Js实现自定义右键行为
Mar 26 #Javascript
jQuery使用addClass()方法给元素添加多个class样式
Mar 26 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php curl的深入解析
2013/06/02 PHP
PHP实现下载远程图片保存到本地的方法
2017/06/19 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
javascript的BOM汇总
2015/07/16 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
小程序实现密码输入框
2020/11/16 Javascript
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
对Python3中的input函数详解
2018/04/22 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python3 pygame实现接小球游戏
2019/05/14 Python
python统计mysql数据量变化并调用接口告警的示例代码
2020/09/21 Python
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
英国排名第一的最新设计师品牌手表独立零售商:TIC Watches
2016/09/24 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
经典c++面试题六
2012/01/18 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
职工运动会邀请函
2014/01/19 职场文书
2014年关于两会精神的心得体会
2014/03/17 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
专职安全员岗位职责
2015/04/11 职场文书
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL