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中对对层的控制
Dec 29 Javascript
几个比较实用的JavaScript 测试及效验工具
Apr 18 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
详解TypeScript的基础类型
Feb 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
laravel 5.1下php artisan migrate的使用注意事项总结
2017/06/07 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
PDO::prepare讲解
2019/01/29 PHP
JS动画效果代码3
2008/04/03 Javascript
jquery 多行滚动代码(附详细解释)
2010/06/17 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
python 捕获shell脚本的输出结果实例
2017/01/04 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
法国时尚童装网站:Melijoe
2016/08/10 全球购物
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
新学期开学寄语
2014/01/18 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
诚信考试标语
2014/06/24 职场文书
水利水电专业自荐信
2014/07/08 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
自主招生自荐信范文
2015/03/04 职场文书
公司人事任命通知
2015/04/20 职场文书
村主任当选感言
2015/08/01 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
Python os和os.path模块详情
2022/04/02 Python