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 相关文章推荐
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
详解Vue This$Store总结
Dec 17 Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 Javascript
详解javascript设计模式三:代理模式
Mar 25 Javascript
three.js利用卷积法如何实现物体描边效果
Nov 27 Javascript
Angular value与ngValue区别详解
Nov 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
php5 and xml示例
2006/11/22 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
php session的锁和并发
2016/01/22 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
react redux入门示例
2018/04/19 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
python的else子句使用指南
2016/02/27 Python
python机器学习之KNN分类算法
2018/08/29 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
简述 Python 的类和对象
2020/08/21 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
澳大利亚音乐商店:Bava’s Music City
2019/05/05 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
生产总经理岗位职责
2013/12/19 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
文体活动总结
2015/02/04 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers