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中的Callback方法浅析
Mar 15 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 Javascript
Javascript实现信息滚动效果
May 18 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
May 21 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
javascript自定义加载loading效果
Sep 15 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 cookie名使用点号(句号)会被转换
2014/10/23 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Django如何自定义分页
2018/09/25 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
python使用opencv对图像mask处理的方法
2019/07/05 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
C#笔试题和英文面试题
2013/02/07 面试题
介绍一下mysql的日期和时间函数
2013/03/28 面试题
大专会计自我鉴定
2014/02/06 职场文书
实习生矿工检讨书
2014/10/13 职场文书
事业单位年度考核评语
2014/12/31 职场文书
主持稿开场白
2015/06/01 职场文书
校园运动会广播稿
2015/08/19 职场文书
python爬取豆瓣电影TOP250数据
2021/05/23 Python