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 相关文章推荐
jquery tab标签页的制作
May 10 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
js创建元素(节点)示例
Jan 02 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
JScript中的条件注释详解
Apr 24 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
Jan 04 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
微信小程序实现简单的select下拉框
Nov 23 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如何调用webservice应用介绍
2012/11/24 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
推荐dojo学习笔记
2007/03/24 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
C#中使用迭代器处理等待任务
2015/07/13 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
JS与jQuery遍历Table所有单元格内容的方法
2015/12/07 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
2017/07/06 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
利用scikitlearn画ROC曲线实例
2020/07/02 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
仓管岗位职责范本
2014/02/08 职场文书
小学评语大全
2014/04/22 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
离职报告格式
2014/11/04 职场文书
中学生运动会广播稿
2015/08/19 职场文书
检讨书格式
2019/04/25 职场文书
Pytest中skip和skipif的具体使用方法
2021/06/30 Python
Python操作CSV格式文件的方法大全
2021/07/15 Python
Python 绘制多因子柱状图
2022/05/11 Python
uniapp开发打包多端应用完整方法指南
2022/12/24 Javascript