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中子元素和后代元素的区别示例介绍
Apr 02 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
bootstrap multiselect下拉列表功能
Aug 22 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 Javascript
vue开发简单上传图片功能
Jun 30 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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 Mysql日期和时间函数集合
2007/11/16 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
vue+iview 兼容IE11浏览器的实现方法
2019/01/07 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
Vue结合路由配置递归实现菜单栏功能
2020/06/16 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python动态监控日志内容的示例
2014/02/16 Python
Python网络爬虫实例讲解
2016/04/28 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python 标准差计算的实现(std)
2019/07/29 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
应届生.NET方向面试题
2015/05/23 面试题
《鸿门宴》教学反思
2014/04/22 职场文书
电台编导求职信
2014/05/06 职场文书
环保倡议书格式范文
2014/05/14 职场文书
经济贸易系求职信
2014/08/04 职场文书
实习生辞职信范文
2015/03/02 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
Python序列化模块JSON与Pickle
2022/06/05 Python