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 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
javascript函数式编程实例分析
Apr 25 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
angular4中关于表单的校验示例
Oct 16 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
Oct 31 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
js之ajax文件上传
May 13 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+mysql分页代码详解
2008/03/27 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
js 动态选中下拉框
2009/11/26 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
AngularJS内置指令
2015/02/04 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
jquery操作ul的一些操作笔记整理(干货)
2017/08/31 jQuery
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
layui默认选中table的CheckBox复选框方法
2019/09/19 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
vue用elementui写form表单时,在label里添加空格操作
2020/08/13 Javascript
python实现无证书加密解密实例
2014/10/27 Python
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python实现月食效果实例代码
2019/06/18 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
小学生学习雷锋倡议书
2014/05/15 职场文书
商业计划书之服装
2019/09/09 职场文书