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 TextBox自动完成条
Jul 22 Javascript
JavaScript中对象property的读取和写入方法介绍
Dec 30 Javascript
浅谈js中变量初始化
Feb 03 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 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学习之简单计算器实现代码
2011/06/09 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Vue 实现前进刷新后退不刷新的效果
2019/06/14 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
wxPython事件驱动实例详解
2014/09/28 Python
python爬虫框架talonspider简单介绍
2017/06/09 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python实现最大子序和的方法示例
2019/07/05 Python
websocket+sockjs+stompjs详解及实例代码
2018/11/30 HTML / CSS
集团公司总经理岗位职责
2013/12/20 职场文书
学校献爱心活动总结
2014/07/08 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)
2021/07/01 HTML / CSS
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS