编程 Javascript

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程序设计有所帮助。

- Author -

上大王

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

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