编程 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实现的使用方向键控制光标在table单元格中切换

Nov 17 Javascript

JS实现div内部的文字或图片自动循环滚动代码

Apr 19 Javascript

用客户端js实现带省略号的分页

Apr 27 Javascript

如何使用Javascript获取距今n天前的日期

Jul 08 Javascript

浅析tr的隐藏和显示问题

Mar 05 Javascript

jquery捕捉回车键及获取checkbox值与异步请求的方法

Dec 24 Javascript

微信小程序页面传值详解

Mar 10 Javascript

Node.js中流(stream)的使用方法示例

Jul 16 Javascript

vue 配置多页面应用的示例代码

Oct 22 Javascript

非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】

Aug 08 jQuery

VUE.CLI4.0配置多页面入口的实现

Nov 25 Javascript

抖音短视频(douyin)去水印工具的实现代码

Mar 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开发的一些注意点总结

2010/10/12 PHP

教你识别简单的免查杀PHP后门

2015/09/13 PHP

php mysql操作mysql_connect连接数据库实例详解

2016/12/26 PHP

在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路

2010/03/02 Javascript

Ext JS 4实现带week(星期)的日期选择控件(实战一)

2013/08/21 Javascript

jquery插件推荐浏览器嗅探userAgent

2014/11/09 Javascript

js实现动画特效的文字链接鼠标悬停提示的方法

2015/03/02 Javascript

浅谈jQuery构造函数分析

2015/05/11 Javascript

javascript事件冒泡实例分析

2015/05/13 Javascript

jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法

2015/12/12 Javascript

Bootstrap多级导航栏(级联导航)的实现代码

2016/03/08 Javascript

boostrapTable的refresh和refreshOptions区别浅析

2017/01/22 Javascript

jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】

2017/03/09 Javascript

JavaScript实现实时更新系统时间的实例代码

2017/04/04 Javascript

jquery Form轻松实现文件上传

2017/05/24 jQuery

PHP7新特性简述

2017/06/11 Javascript

JS实现数组去重方法总结(六种方法)

2017/07/14 Javascript

vue2.0 实现导航守卫的具体用法（路由守卫）

2018/05/17 Javascript

JS重学系列之聊聊new操作符

2019/03/04 Javascript

Vue使用axios引起的后台session不同操作

2020/08/14 Javascript

javascript canvas封装动态时钟

2020/09/30 Javascript

Python正则表达式使用范例分享

2016/12/04 Python

Python 基础教程之包和类的用法

2017/02/23 Python

PyTorch中topk函数的用法详解

2020/01/02 Python

OpenCV Python实现拼图小游戏

2020/03/23 Python

Python如何合并多个字典或映射

2020/07/24 Python

出纳员的岗位职责

2014/02/22 职场文书

企业标语大全

2014/07/01 职场文书

酒店管理失职检讨书

2014/09/16 职场文书

大学生暑期实践报告

2015/07/13 职场文书

社区低保工作总结2015

2015/07/23 职场文书

六一儿童节致辞

2015/07/31 职场文书

检举信的写法

2019/04/10 职场文书

演讲开头怎么书写？

2019/08/06 职场文书

PHP新手指南

2021/04/01 PHP

C#连接ORACLE出现乱码问题的解决方法

2021/10/05 Oracle