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 相关文章推荐
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
js中创建对象的几种方式
Feb 05 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
浅谈Vue数据绑定的原理
Jan 08 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
ES6字符串的扩展实例
Dec 21 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
php检测apache mod_rewrite模块是否安装的方法
2015/03/14 PHP
yii2实现分页,带搜索的分页功能示例
2017/01/07 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
JQuery 学习笔记 element属性控制
2009/07/23 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
2016/12/21 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
BootStrap中的Fontawesome 图标
2017/05/25 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Python中Numpy mat的使用详解
2019/05/24 Python
python实现猜拳小游戏
2020/04/05 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Python远程方法调用实现过程解析
2020/07/28 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
美国时尚在线:Showpo
2017/09/08 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
满月酒主持词
2014/03/27 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
保管员岗位职责
2015/02/14 职场文书
2015年教研员工作总结
2015/05/26 职场文书
Python编写nmap扫描工具
2021/07/21 Python
Vue router配置与使用分析讲解
2022/12/24 Vue.js