本文实例分析了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程序设计有所帮助。

jQuery中append()与appendto()用法分析的更多相关文章

  1. jQuery中append()与appendTo()方法区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  2. jquery中 append 和appendto的区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  3. jquery中append与appendTo方法区别

    1. append(content)方法 方法作用:向每个匹配的元素内部追加内容. 参数介绍:content (<Content>): 要追加到目标中的内容. 用法示例: HTML代码为& ...

  4. JQuery之append和appendTo的区别,还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  5. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  6. jquery中的$.fn的用法

    JQuery里的原型prototype分析       http://www.nowamagic.net/librarys/veda/detail/653 jquery中的$.fn的用法       ...

  7. js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 for循环

    js中return false; jquery中需要这样写:return false(); Jquery 中循环 each的用法 $(".progressName").each(f ...

  8. jquery中append、prepend, before和after方法的区别(一)

    原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...

  9. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

随机推荐

  1. 【SIGGRAPH 2015】【巫师3 狂猎 The Witcher 3: Wild Hunt 】顶级的开放世界游戏的实现技术。

    [SIGGRAPH 2015][巫师3 狂猎 The Witcher 3: Wild Hunt ]顶级的开放世界游戏的实现技术 作者:西川善司 日文链接  http://www.4gamer.net/ ...

  2. 设计和实现OLAP解决方案

    设计和实现OLAP解决方案   第一讲 简介首先,啥叫数据仓库? 数据仓库就是数据的仓库!用外文说叫Data Warehouse,简称DW. 是不是哐当倒下一片啊,要不咱换个专业点的说法? 数据仓库是 ...

  3. Bootstrap页面布局4 - 嵌套布局

    嵌套布局: 在一行中,有三列,每一列都有对应的BS栅格系统中的格子,以下例中因为 .row中的div对应的class分别是span4,span4,span4,所以其每一列对应的格子数是 4,4,4 现 ...

  4. 1.PHP内核探索:从SAPI接口开始

    SAPI:Server Application Programming Interface 服务器端应用编程端口.研究过PHP架构的同学应该知道这个东东的重要性,它提供了一个接口,使得PHP可以和其他 ...

  5. Sign-Magnitude Representation

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION There are several alt ...

  6. android动态调试samli代码(转)

    转载自看雪http://bbs.pediy.com/showthread.php?t=189610,非常感谢原作者分享! 跟踪apk一般的做法是在反编译的smali代码中插入log输出,然后重新编译运 ...

  7. Windows Runtime - 面向对象化的C++(并非意味着托管)

    Windows 8的开发平台总体上分为两部分:一是全新的WinRT,界面搭配Metro style,二是传统的Win32..NET(SL).IE三大平台,界面为传统窗体风格.其中全新的WinRT被微软 ...

  8. Scrambled Polygon---poj2007(利用叉积排序)

    题目链接:http://poj.org/problem?id=2007 题意:乱序给出凸多边形的顶点坐标,要求按逆时 针顺序输出各顶点.给的第一个点一定是 (0,0),没有其他点在坐标轴上,没有三点 ...

  9. mac下安装使用svn

    mac自带了svn服务端和客户端,所以只需要简单配置一下就可以使用   转自  http://blog.sina.com.cn/s/blog_677fb16e01011i6l.html 1.创建svn ...

  10. thinkphp 加载静态框架frameset frame 浏览器显示空白

    我觉得静态框架这个东西非常奇怪,可能是因为没有研究透它. 我的情况是这样的,我之前做过的一个面向对象没有基于thinkPHP,的项目中用同一套后台静态框架没有问题,但用thinkphp后台的index ...