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 相关文章推荐
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
vue-cli 如何打包上线的方法示例
May 08 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
解决LayUI表单获取不到data的问题
Aug 20 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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生成缩略图的类代码
2008/10/02 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
浅析PHP页面局部刷新功能的实现小结
2013/06/21 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
php实现简单的守护进程创建、开启与关闭操作
2019/08/13 PHP
JavaScript的Function详细
2006/11/14 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
2019/05/27 jQuery
javascript实现简易数码时钟
2020/03/30 Javascript
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
vscode调试django项目的方法
2020/08/06 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
美国著名手表网站:Timepiece
2017/11/15 全球购物
SQL Server 2000数据库的文件有哪些,分别进行描述。
2015/11/09 面试题
公交公司毕业生求职信
2014/02/15 职场文书
医德医风演讲稿
2014/05/20 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
详解OpenCV曝光融合
2022/04/29 Python