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 相关文章推荐
一个XML格式数据转换为图表的例子
Feb 09 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
Apr 01 Javascript
Jquery AJAX POST与GET之间的区别
Nov 14 Javascript
thinkphp中常用的系统常量和系统变量
Mar 05 Javascript
jQuery实现简单的DIV拖动效果
Feb 19 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
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
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
TBCompressor js代码压缩
2011/01/05 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
2018/04/22 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python中threading超线程用法实例分析
2015/05/16 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
python执行使用shell命令方法分享
2017/11/08 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python实现简单的文字识别
2018/11/27 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
详解Python绘图Turtle库
2019/10/12 Python
在OpenCV里实现条码区域识别的方法示例
2019/12/04 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
营销与策划个人求职信
2013/09/22 职场文书
入党申请书自我鉴定
2013/10/12 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
4s店活动策划方案
2014/08/25 职场文书
十佳少先队员演讲稿
2014/09/12 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
单位介绍信格式
2015/01/31 职场文书
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android