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 相关文章推荐
走出JavaScript初学困境—js初学
Dec 29 Javascript
js Flash插入函数免激活代码
Mar 31 Javascript
js DOM模型操作
Dec 28 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
Sep 26 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
js实现搜索栏效果
Nov 16 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
PHP反向代理类代码
2014/08/15 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
深入理解React高阶组件
2017/09/28 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
2018/02/08 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
八大排序算法的Python实现
2021/01/28 Python
Python 文件操作的详解及实例
2017/09/18 Python
Python如何将模块打包并发布
2020/08/30 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
简历中求职的个人自我评价
2013/12/03 职场文书
银行求职信怎么写
2019/06/20 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫