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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
jQuery标签替换函数replaceWith()的使用例子
Aug 28 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
js实现贪吃蛇小游戏(加墙)
Jul 31 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
原生js实现分页效果
Sep 23 Javascript
用JS创建一个录屏功能
Nov 11 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
ftp类(example.php)
2006/10/09 PHP
967 个函式
2006/10/09 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
做网页的一些技巧
2007/02/01 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
JS异步文件分片断点上传的实现思路
2016/12/25 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
2017/12/18 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python程序运行原理图文解析
2018/02/10 Python
python实现一组典型数据格式转换
2018/12/15 Python
24式加速你的Python(小结)
2019/06/13 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
JSP和Servlet有哪些相同点和不同点,他们之间的联系是什么?
2015/10/22 面试题
vue+django实现下载文件的示例
2021/03/24 Vue.js
销售自荐信
2013/10/22 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
售后求职信范文
2014/03/15 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
男方婚礼答谢词
2015/01/20 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript