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 相关文章推荐
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
JavaScript函数详解
Feb 27 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
javascript数据结构之双链表插入排序实例详解
Nov 25 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
js下载文件并修改文件名
May 08 Javascript
纯JS实现简单的日历
Jun 26 Javascript
Vue引入sass并配置全局变量的方法
Jun 27 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
TP3.2.3框架文件上传操作实例详解
2020/01/23 PHP
单击浏览器右上角的X关闭窗口弹出提示的小例子
2013/06/12 Javascript
setTimeout自动触发一个js的方法
2014/01/15 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
Bootstrap每天必学之警告框插件
2016/04/26 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
Angular的自定义指令以及实例
2016/12/26 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
js在HTML的三种引用方式详解
2020/08/29 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python中的字符串替换操作示例
2016/06/27 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python列表list排列组合操作示例
2018/12/18 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python修改文件内容的3种方法详解
2019/11/15 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
给导游的表扬信
2014/01/10 职场文书
干部鉴定材料
2014/05/18 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS