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 相关文章推荐
js确认框confirm()用法实例详解
Jan 07 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
element多个表单校验的实现
May 27 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的面试题集
2006/11/19 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
js为数字添加逗号并格式化数字的代码
2013/08/23 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
layui实现数据分页功能
2019/07/27 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)
2019/05/28 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
python PIL和CV对 图片的读取,显示,裁剪,保存实现方法
2019/08/07 Python
英国领先的在线旅游和休闲零售商:lastminute.com
2019/01/23 全球购物
建筑设计所实习生自我鉴定
2013/09/25 职场文书
优秀教师单行材料
2014/12/16 职场文书
婚育证明格式
2015/06/17 职场文书
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
Python Flask实现进度条
2022/05/11 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android