本文实例分析了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. Javascript 笔记与总结（1-6）Javascript 面向对象

    在 JavaScript 中,有对象,没有类(但有构造函数). 在 JavaScript 中,对象不依赖于类而存在,可以直接生成. {key:value, key:value} 这种格式的对象,成为 ...

  2. PHP fwrite() 函数与 file_put_contents() 函数的比较

    两个 PHP 函数都可以把字符串保存到文件中,fwrite() 函数的格式是: int fwrite ( resource handle , string string [ , int length] ...

  3. 【翻译】CEDEC2014[跨越我的尸体2]跨越Stylized Rendering

    Stylized Rendering相关的一篇PPT,PSV上的[跨越我的尸体2],本代的画风参照的是川瀬巴水的木版画风格.不过因为PSV硬件的限制,最后真机上的效果还是有不少折扣的.ppt里提到参考 ...

  4. mysql之触发器trigger 详解

    为了梦想,努力奋斗! 追求卓越,成功就会在不经意间追上你 mysql之触发器trigger 触发器(trigger):监视某种情况,并触发某种操作. 触发器创建语法四要素:1.监视地点(table)  ...

  5. Lazarus中Base64的操作

    在字符串处理中,我们经常需要对文件编码然后再进行传输,通常会使用base64编码,在FreePascal中默认集成了这个单元,我们来介绍如何使用: 首先需要在引用单元的时候使用: use base64 ...

  6. 【转】Laravel+Angularjs+D3打造可视化数据,RESTful+Ajax

    http://897371388.iteye.com/blog/1975351 大致思路也就是下面,由于最近在学Laravel也在学Angularjs,加上之前做的项目用到了d3. 原来的方案如下: ...

  7. [Virtualization][SDN] 讲的很好的SDN软件定义网络视频课程

    51CTO的免费课程,开始以为是扯蛋的,后来看了一下,讲的很好.注册一下,免费的. 只看了导论,挺好的. http://edu.51cto.com/course/course_id-4466.html

  8. NRF51822之pstorage介绍

    This information applies to the following SoftDevices: S110, S120, S130, S310 Introduction Persisten ...

  9. docker squid---but git proxy should specify by git config --global http.proxy http:...

    Usage of loopback devices is strongly discouraged for production use. Either use `--storage-opt dm.t ...

  10. 通过runtime替换系统类实现的代码（从github开源库fdstackview中摘录）

    其中部分代码为汇编:由此可见oc的runtime的灵活性和能力.此代码仅供参考 // ---------------------------------------------------- // R ...