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 相关文章推荐
JavaScript 版本自动生成文章摘要
Jul 23 Javascript
js substr支持中文截取函数代码(中文是双字节)
Apr 17 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
js尾调用优化的实现
May 23 Javascript
详解ES6 Promise的生命周期和创建
Aug 18 Javascript
js基础之事件捕获与冒泡原理
Oct 09 Javascript
vue2实现provide inject传递响应式
May 21 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
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
js函数的延迟加载实现代码
2012/10/11 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
angular指令笔记ng-options的使用方法
2017/09/18 Javascript
js中的闭包实例展示
2018/11/01 Javascript
js回调函数仿360开机
2019/12/26 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
Python标准库之随机数 (math包、random包)介绍
2014/11/25 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
PyQt5实现拖放功能
2018/04/25 Python
基于树莓派的语音对话机器人
2019/06/17 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python 如何将office文件转换为PDF
2020/09/22 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
html5 标签
2009/07/16 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
食品营养与检测应届生求职信
2013/11/08 职场文书
致跳远、跳高运动员广播稿
2014/01/09 职场文书
英语简历自我评价
2014/01/26 职场文书
社区志愿者活动方案
2014/08/18 职场文书
政府领导干部个人对照检查材料思想汇报
2014/09/24 职场文书
县委务虚会发言材料
2014/10/20 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript