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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
JS实现商品筛选功能
Aug 19 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
解决vue-cli + webpack 新建项目出错的问题
Mar 20 Javascript
微信小程序实现商品属性联动选择
Feb 15 Javascript
vue实现多条件和模糊搜索功能
May 28 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 session有效期session.gc_maxlifetime
2011/04/20 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP 闭包详解及实例代码
2016/09/28 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
jQuery遍历Form示例代码
2013/09/03 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
2014/06/20 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
js中遍历对象的属性和值的方法
2016/07/27 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
vue.extend与vue.component的区别和联系
2018/09/19 Javascript
element vue Array数组和Map对象的添加与删除操作
2018/11/14 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
护理学专业推荐信
2013/12/03 职场文书
自我评价的写作规则
2014/01/06 职场文书
低碳生活倡议书
2014/04/14 职场文书
我的梦中国梦演讲稿
2014/04/23 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
python之基数排序的实现
2021/07/26 Python