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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
js自动下载文件到本地的实现代码
Apr 28 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
Jul 08 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
JavaScript实现京东快递单号查询
Nov 30 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
webpack入门必知必会
2017/01/16 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
简单掌握Python的Collections模块中counter结构的用法
2016/07/07 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python实现京东秒杀功能代码
2019/05/16 Python
Python3 执行Linux Bash命令的方法
2019/07/12 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
高级Java程序员面试要点
2013/08/02 面试题
成语的广告词
2014/03/19 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
2015年中学团委工作总结
2015/07/22 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS