jquery中append()与appendto()用法分析


Posted in Javascript onNovember 14, 2014

本文实例分析了jquery中append()与appendto()的用法。分享给大家供大家参考。具体分析如下:

在jQuery的文档操作方法中,append()和appentto()方法执行的任务相同,但是两者也有区别。

1、append()方法:在被选元素的结尾(但仍在元素内部)插入指定的内容。

a、语法:

$(selector).append(content);
其中,参数content是必需的,指定要附加的内容。

b、append能够使用函数给被选元素附加内容,语法为:

$(selector).append(function(index,html));
其中,function()是必需的,参数index和html都是可选的。index表示接收选择器的index位置,html表示接收选择器的当前html。

例子:

<html>  

<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

  $("button").click(function(){  

    $("p").append(" <b>Hello jQuery!</b>");  

  });  

});  

</script>  

</head>  

<body>  

<p>This is a paragraph.</p>  

<p>This is another paragraph.</p>  

<button>在每个 p 元素的结尾添加内容</button>  

</body>  

</html>

运行结果如下:

This is a paragraph. Hello jQuery!
This is another paragraph. Hello jQuery!

2、appendto()方法:在被选元素的结尾(但仍在元素的内部)插入指定的内容。但不能使用函数来附加内容。

语法:

$(content).appendto(selector);

例子:

<html>  

<head>  

<script type="text/javascript" src="/jquery/jquery.js"></script>  

<script type="text/javascript">  

$(document).ready(function(){  

  $("button").click(function(){  

    $("<b> Hello jQuery!</b>").appendTo("p");  

  });  

});  

</script>  

</head>  

<body>  

<p>This is a paragraph.</p>  

<p>This is another paragraph.</p>  

<button>在每个 p 元素的结尾添加内容</button>  

</body>  

</html>

运行结果如下:

This is a paragraph. Hello jQuery!
This is another paragraph. Hello jQuery!

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery的deferred对象使用详解
Aug 20 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
vue组件实现文字居中对齐的方法
Aug 23 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
Angular4学习之Angular CLI的安装与使用教程
Jan 04 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
jQuery 插件开发指南
Nov 14 #Javascript
使用JavaScript和C#中获得referer
Nov 14 #Javascript
JavaScript window.location对象
Nov 14 #Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 #Javascript
详谈JavaScript内存泄漏
Nov 14 #Javascript
js与C#进行时间戳转换
Nov 14 #Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 #Javascript
You might like
PHP实现的多维数组去重操作示例
2018/07/21 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
深入理解Promise.all
2018/08/08 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
跟老齐学Python之集成开发环境(IDE)
2014/09/12 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python Requests库基本用法示例
2018/08/20 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
Python是什么 Python的用处
2020/05/26 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
Pyqt助手安装PyQt5帮助文档过程图解
2020/11/20 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
几道数据库的面试题或笔试题
2014/05/31 面试题
财务会计专业毕业生自荐信
2013/10/19 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
市级文明单位申报材料
2014/05/07 职场文书
2014年征兵标语
2014/06/20 职场文书
商业计划书之服装
2019/09/09 职场文书
话题作文之成长
2019/12/09 职场文书