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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
Feb 22 Javascript
javascript中文本框中输入法切换的问题
Dec 10 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
Jun 23 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
jquery编写日期选择器
Mar 16 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
Feb 11 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
原生JS实现微信通讯录
Jun 18 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多线程并发实现方法
2016/09/30 PHP
php测试kafka项目示例
2020/02/06 PHP
有效的捕获JavaScript焦点的方法小结
2009/10/08 Javascript
jquery中:input和input的区别分析
2011/07/13 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
vue 获取视频时长的实例代码
2019/08/20 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
详解Python中的Descriptor描述符类
2016/06/14 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python实现文件的分割与合并
2019/08/29 Python
python系列 文件操作的代码
2019/10/06 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
解决django FileFIELD的编码问题
2020/03/30 Python
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
中文专业求职信
2014/06/20 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
四风之害观后感
2015/06/09 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
新手必备Python开发环境搭建教程
2021/05/28 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Redis命令处理过程源码解析
2022/02/12 Redis
深入浅出的讲解:信号调制到底是如何实现的
2022/02/18 无线电