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 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript 网页跳转的方法
Dec 24 Javascript
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
js切换光标示例代码
Oct 10 Javascript
Jquery 改变radio/checkbox选中状态,获取选中的值(示例代码)
Dec 12 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
VUE路由动态加载实例代码讲解
Aug 26 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递归返回值时出现的问题解决办法
2013/02/19 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
js实现界面向原生界面发消息并跳转功能
2016/11/22 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
bootstrapValidator表单校验、更改状态、新增、移除校验字段的实例代码
2020/05/19 Javascript
vue祖孙组件之间的数据传递案例
2020/12/07 Vue.js
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python类继承用法实例分析
2015/05/27 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
学校评语大全
2014/05/06 职场文书
教师党员岗位承诺书
2014/05/29 职场文书
物流管理专业自荐信
2014/06/23 职场文书
单位工作证明范文
2014/09/14 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
2019年教师入党申请书
2019/06/27 职场文书