编程 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 getComputedStyle获取和设置style的原理

Oct 10 Javascript

seajs1.3.0源码解析之module依赖有序加载

Nov 07 Javascript

鼠标滚轮控制网页横向移动实现思路

Mar 22 Javascript

javascript替换已有元素replaceChild()使用介绍

Apr 03 Javascript

JS+CSS实现淡入式焦点图片幻灯切换效果的方法

Feb 26 Javascript

详解如何在Vue2中实现组件props双向绑定

Mar 29 Javascript

Angualrjs和bootstrap相结合实现数据表格table

Mar 30 Javascript

es6学习之解构时应该注意的点

Aug 29 Javascript

angular中ui calendar的一些使用心得(推荐)

Nov 03 Javascript

浅谈vuejs实现数据驱动视图原理

Feb 23 Javascript

在layui.use 中自定义 function 的正确方法

Sep 16 Javascript

用几道面试题来看JavaScript执行机制

Apr 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 session有效期session.gc_maxlifetime

2011/04/20 PHP

匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来

2011/12/25 PHP

在win7中搭建Linux+PHP 开发环境

2014/10/08 PHP

3款值得推荐的微信开发开源框架

2014/10/28 PHP

Nginx环境下PHP flush失效的解决方法

2016/10/19 PHP

PHP利用超级全局变量$_POST来接收表单数据的实例

2016/11/05 PHP

PHP PDOStatement::nextRowset讲解

2019/02/01 PHP

laravel 根据不同组织加载不同视图的实现

2019/10/14 PHP

JavaScript sup方法入门实例（把字符串显示为上标）

2014/10/20 Javascript

JavaScript父子窗体间的调用方法

2015/03/31 Javascript

jquery实现多屏多图焦点图切换特效的方法

2015/05/04 Javascript

jQuery实现简易的天天爱消除小游戏

2015/10/16 Javascript

轻松实现Bootstrap图片轮播

2020/04/20 Javascript

vuejs选中当前样式active的实例

2018/08/22 Javascript

搭建vscode+vue环境的详细教程

2020/08/31 Javascript

Python序列之list和tuple常用方法以及注意事项

2015/01/09 Python

在Python的Flask框架中构建Web表单的教程

2016/06/04 Python

利用python写个下载teahour音频的小脚本

2017/05/08 Python

Pandas读写CSV文件的方法示例

2019/03/27 Python

在django中图片上传的格式校验及大小方法

2019/07/28 Python

flask 实现token机制的示例代码

2019/11/07 Python

pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)

2020/05/09 Python

CSS3中线性颜色渐变的一些实现方法

2015/07/14 HTML / CSS

HTML5上传文件显示进度的实现代码

2012/08/30 HTML / CSS

美国玛丽莎收藏奢华时尚商店：Marissa Collections

2016/11/21 全球购物

Kipling澳洲官网：购买凯浦林包包

2020/12/17 全球购物

铭立家具面试题

2012/12/06 面试题

生产车间主管岗位职责

2013/12/28 职场文书

大学校园活动策划书

2014/02/04 职场文书

第一批党的群众路线教育实践活动工作总结

2014/03/03 职场文书

商业项目策划方案

2014/06/05 职场文书

学生旷课检讨书500字

2014/10/28 职场文书

单位介绍信格式

2015/01/31 职场文书

2015年社区中秋节活动总结

2015/03/23 职场文书

漫画「狩龙人拉格纳」公开TV动画预告图

2022/03/22 日漫

Consul在linux环境的集群部署

2022/04/08 Servers