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 相关文章推荐
accesskey 提交
Jun 26 Javascript
javascript 四则运算精度修正函数代码
May 31 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
基于D3.js实现时钟效果
Jul 17 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 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
Zerg兵种介绍
2020/03/14 星际争霸
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
jQuery中append()方法用法实例
2015/01/08 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
详解JavaScript之Array.reduce源码解读
2020/11/01 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
pip指定python位置安装软件包的方法
2019/07/12 Python
python生成requirements.txt的两种方法
2019/09/18 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
如何用Django处理gzip数据流
2021/01/29 Python
顺丰快递Java软件工程师面试题
2015/07/31 面试题
应届生妇产科护士求职信
2013/10/27 职场文书
怎样写留学自荐信
2013/11/11 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
英语教师自荐信
2014/05/26 职场文书
2015年公民道德宣传日活动总结
2015/03/23 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书