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 相关文章推荐
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
javascript中的this详解
Dec 08 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
快速处理vue渲染前的显示问题
Mar 05 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
es6数值的扩展方法
Mar 11 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
小程序实现tab标签页
Nov 16 Javascript
vue3自定义dialog、modal组件的方法
Jan 04 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
基于mysql的论坛(6)
2006/10/09 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
在Python中使用模块的教程
2015/04/27 Python
Python实现简单的代理服务器
2015/07/25 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python代码 输入数字使其反向输出的方法
2018/12/22 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python3将变量写入SQL语句的实现方式
2020/03/02 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
2019/12/17 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
物理系毕业生自荐书
2014/06/13 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
采购员岗位职责
2015/02/03 职场文书
运动会广播稿50字
2015/08/19 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技