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实现计算加载页面所用的时间
Apr 02 Javascript
jQuery创建自己的插件(自定义插件)的方法
Jun 10 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
浅析JQuery中的html(),text(),val()区别
Sep 01 Javascript
分享Javascript实用方法二
Dec 13 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 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
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jQuery通过deferred对象管理ajax异步
2016/05/20 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
Python操作MySQL数据库实例详解【安装、连接、增删改查等】
2020/01/17 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
八项规定整改方案
2014/02/21 职场文书
寄语是什么意思
2014/04/10 职场文书
信息技术课后反思
2014/04/27 职场文书
会计学自荐信
2014/06/03 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
个人求职信格式范文
2015/03/20 职场文书
公司联欢会主持词
2015/07/04 职场文书
企业安全生产检查制度
2015/08/06 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js