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的图片轮播 tab切换组件
Jul 19 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
AngularJS动态生成div的ID源码解析
Aug 29 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
Nov 29 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
使用vue-cli创建项目的图文教程(新手入门篇)
May 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分页函数
2006/10/09 PHP
php getsiteurl()函数
2009/09/05 PHP
PHP关联链接常用代码
2012/11/05 PHP
php下载文件源代码(强制任意文件格式下载)
2014/05/09 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
php验证码生成代码
2015/11/11 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
纯javascript判断查询日期是否为有效日期
2015/08/24 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python计算两个数的百分比方法
2018/06/29 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
美国著名的品牌折扣店:Burlington
2017/06/08 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
高级电工工作职责
2013/11/21 职场文书
教师对学生的评语
2014/04/28 职场文书
小班评语大全
2014/05/04 职场文书
禁烟标语大全
2014/06/11 职场文书
篮球社团活动总结
2014/06/27 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
党内外群众意见范文
2015/06/02 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS