jQuery使用after()方法在元素后面添加多项内容的方法


Posted in Javascript onMarch 26, 2015

本文实例讲述了jQuery使用after()方法在元素后面添加多项内容的方法。分享给大家供大家参考。具体分析如下:

jQuery可通过after()方法在元素后面添加多项内容,after()可以带多个参数,在指定元素后面添加多项内容

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
function afterText()
{
var txt1="<b>I </b>"; // Create element with HTML
var txt2=$("<i></i>").text("love "); // Create with jQuery
var txt3=document.createElement("big"); // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Insert new elements after img
}
</script>
</head>
<body>
<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">
<br><br>
<button onclick="afterText()">Insert after</button>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
Javascript仿京东放大镜的效果
Mar 01 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
vue2.0 路由不显示router-view的解决方法
Mar 06 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
Aug 22 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 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
Jquery异步提交表单代码分享
Mar 26 #Javascript
You might like
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
详解JavaScript中数组的相关知识
2015/07/29 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
setTimeout学习小结
2017/02/08 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python 列表推导式使用详解
2019/08/29 Python
python logging.basicConfig不生效的原因及解决
2020/02/20 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
ORACLE十问
2015/04/20 面试题
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
平面设计岗位职责
2013/12/14 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python