本文实例分析了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. php--某个字符在字符串中的位置比较

    <?php $haystack = 'helloe'; $needle = 'e'; $pos = stripos($haystack, $needle); echo "\n" ...

  2. double-clicking

    <!doctype html> <button id="id0" onclick="w('id0','str0')">target0&l ...

  3. Delphi 的绘图功能[1] - PolyBezier、PolyBezierTo

    双击代码全选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 unit Unit1; interface uses Windows, Messages, SysUtils ...

  4. 【转】设计模式（三）建造者模式Builder（创建型）

    (http://blog.csdn.net/hguisu/article/details/7518060) 1. 概述 在软件开发的过程中,当遇到一个"复杂的对象"的创建工作,该对 ...

  5. HTML5 本地存储 LocalStorage

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  6. C语言第一次作业

  7. Visual Studio 2005安装qt-win-commercial-src-4.3.1，并设置环境变量

    虽然已经在Visual Studio 2005下安装Qt4已经n次了,还是打算在上写写安装方法. qt-win-commercial-src-4.3.1.zip.qt-vs-integration-1 ...

  8. Qt设置系统时间（使用SetSystemTime API函数）

    大家都知道Qt中有QDateTime等有关时间与日期的类,类中包含很多成员函数,可以很方便的实现有关时间与日期的操作,比如:想要获得系统当前的时间与日期,可以调用currentDateTime();  ...

  9. backbone 更新1.1.2

    backbone已经更新到1.1.2,在这里总结一下 我还一直用的1.0的版本,更新确实出现了一些问题 1.1.0  Backbone Views no longer automatically at ...

  10. 转：ASP.NET MVC扩展之HtmlHelper辅助方法

    1.什么是HtmlHelper辅助方法?其实就是HtmlHelper类的扩展方法,如下所示: namespace System.Web.Mvc.Html { public static class F ...