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 14 Javascript
关于firefox的ElementTraversal 接口 使用说明
Nov 11 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
Node.js连接mongodb实例代码
Jun 06 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 Javascript
swiper实现导航滚动效果
Dec 13 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
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
jquery实现表格本地排序的方法
2015/03/11 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
ndm:NPM的桌面GUI应用程序
2018/10/15 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
js原生map实现的方法总结
2020/01/19 Javascript
vue实现验证用户名是否可用
2021/01/20 Vue.js
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
python实现清屏的方法
2015/04/30 Python
Python文件处理
2016/02/29 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
浅析Python四种数据类型
2018/09/26 Python
详解python编译器和解释器的区别
2019/06/24 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
Marlies Dekkers内衣法国官方网上商店:国际知名的荷兰内衣品牌
2019/03/18 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
出国签证在职证明
2014/01/16 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
竞选村长演讲稿
2014/04/28 职场文书
大学生应聘求职信
2014/05/26 职场文书
总经理助理岗位职责
2015/01/31 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
深入理解python多线程编程
2021/04/18 Python
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
Python中的pprint模块
2021/11/27 Python
mysql 获取时间方式
2022/03/20 MySQL
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL