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 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
Javascript实现信息滚动效果
May 18 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
seajs和requirejs模块化简单案例分析
Aug 26 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 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
php microtime获取浮点的时间戳
2010/02/21 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
JavaScript获取元素尺寸和大小操作总结
2015/02/27 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
解决angularjs中同步执行http请求的方法
2018/08/13 Javascript
微信小程序CSS3动画下拉菜单效果
2018/11/04 Javascript
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
python实现转圈打印矩阵
2019/03/02 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python中update的基本使用方法详解
2019/07/17 Python
亚马逊海外购:亚马逊美国、英国、日本、德国直邮
2021/03/18 全球购物
毕业生就业意向书
2014/04/01 职场文书
工商企业管理专业自荐信范文
2014/04/12 职场文书
建筑工地宣传标语
2014/06/18 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
项目验收申请报告
2015/05/15 职场文书
让世界充满爱观后感
2015/06/10 职场文书
机器人瓦力观后感
2015/06/12 职场文书
安全教育第一课观后感
2015/06/17 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书