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 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
纯js实现遮罩层效果原理分析
May 27 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
解决Vue项目中tff报错的问题
Oct 21 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获取远程文件的内容和大小
2015/11/03 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
YII框架页面缓存操作示例
2019/04/29 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
2016/11/15 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
对angular 监控数据模型变化的事件方法$watch详解
2018/10/09 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
python实现决策树、随机森林的简单原理
2018/03/26 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python中的json总结
2018/10/11 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
python模拟斗地主发牌
2020/04/22 Python
Python如何将装饰器定义为类
2020/07/30 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
90后毕业生的求职信范文
2013/09/21 职场文书
教师对学生的评语
2014/04/28 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
新员工考核评语
2014/12/31 职场文书
离婚案件答辩状
2015/05/22 职场文书
事业单位岗位说明书
2015/10/08 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
python 批量压缩图片的脚本
2021/06/02 Python