jQuery使用prepend()方法在元素前添加内容用法实例


Posted in Javascript onMarch 26, 2015

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

下面的代码可实现在文本前和列表前添加新的元素

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#btn1").click(function(){
  $("p").prepend("<b>Prepended text</b>. ");
 });
 $("#btn2").click(function(){
  $("ol").prepend("<li>Prepended item</li>");
 });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>

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

Javascript 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
浅谈vue的几种绑定变量的值 防止其改变的方法
Mar 01 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 #Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 #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
You might like
yii框架中的Url生产问题小结
2012/01/16 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
js计算两个时间之间天数差的实例代码
2013/11/19 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
jquery选择器简述
2015/08/31 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
vue中如何实现变量和字符串拼接
2017/06/19 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
[02:55]含熏伴清风,风行者至宝、屠夫身心及典藏宝瓶二展示
2020/09/08 DOTA
python+opencv实现摄像头调用的方法
2019/06/22 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
财务管理专业毕业生求职信范文
2013/09/21 职场文书
社团活动总结模板
2014/06/30 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
三好学生事迹材料
2014/12/24 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
MySQL系列之二 多实例配置
2021/07/02 MySQL
利用python做数据拟合详情
2021/11/17 Python