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 相关文章推荐
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
浅谈Angular HttpClient简单入门
May 04 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
Echarts动态加载多条折线图的实现代码
May 24 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
Python安装第三方库的3种方法
2015/06/21 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
100行Python代码实现每天不同时间段定时给女友发消息
2019/09/27 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
房地产开盘策划方案
2014/02/10 职场文书
项目建议书范文
2014/05/12 职场文书
教师考核材料
2014/05/21 职场文书
上课随便讲话检讨书
2014/09/12 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
Python实现生活常识解答机器人
2021/06/28 Python