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 相关文章推荐
javawscript 三级菜单的实现原理
Jul 01 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
javascript实现2048游戏示例
May 04 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
easyui validatebox验证
Apr 29 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 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新手上路(十二)
2006/10/09 PHP
PHP 获取MySQL数据库里所有表的实现代码
2011/07/13 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
React路由鉴权的实现方法
2019/09/05 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
[02:27]2014DOTA2国际邀请赛 VG赛后采访:更大的挑战在等着我们
2014/07/13 DOTA
python练习程序批量修改文件名
2014/01/16 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
2014/03/31 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
一月红领巾广播稿
2014/02/11 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
禁毒心得体会范文
2016/01/15 职场文书
大学生社区义工服务心得体会
2016/01/22 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
javascript代码简写的几种常用方式汇总
2021/08/23 Javascript
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
在Centos 8.0中安装Redis服务器的教程详解
2022/03/21 Redis
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers