zoukankan      html  css  js  c++  java
  • jQuery中append()与appendto()用法分析

    本文实例分析了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。

    例子:

    代码如下:

     1 <html> 
     2 <head> 
     3 <script type="text/javascript" src="/jquery/jquery.js"></script> 
     4 <script type="text/javascript"> 
     5 $(document).ready(function(){ 
     6   $("button").click(function(){ 
     7     $("p").append(" <b>Hello jQuery!</b>"); 
     8   }); 
     9 }); 
    10 </script> 
    11 </head> 
    12 <body> 
    13 <p>This is a paragraph.</p> 
    14 <p>This is another paragraph.</p> 
    15 <button>在每个 p 元素的结尾添加内容</button> 
    16 </body> 
    17 </html>

    运行结果如下:

    This is a paragraph. Hello jQuery!
    This is another paragraph. Hello jQuery!

    2、appendto()方法:在被选元素的结尾(但仍在元素的内部)插入指定的内容。但不能使用函数来附加内容。

    语法:

    代码如下:

    $(content).appendto(selector);
    

     例子:

    代码如下:

     1 <html> 
     2 <head> 
     3 <script type="text/javascript" src="/jquery/jquery.js"></script> 
     4 <script type="text/javascript"> 
     5 $(document).ready(function(){ 
     6   $("button").click(function(){ 
     7     $("<b> Hello jQuery!</b>").appendTo("p"); 
     8   }); 
     9 }); 
    10 </script> 
    11 </head> 
    12 <body> 
    13 <p>This is a paragraph.</p> 
    14 <p>This is another paragraph.</p> 
    15 <button>在每个 p 元素的结尾添加内容</button> 
    16 </body> 
    17 </html>

    运行结果如下:

    This is a paragraph. Hello jQuery!
    This is another paragraph. Hello jQuery!

    希望本文所述对大家的jQuery程序设计有所帮助。

  • 相关阅读:
    堆排序实现
    Unable to convert MySQL date/time value to System.DateTime
    想想那些除了技术之外重要的事情
    js小功能
    01输入框回车触发操作
    javascript闭包
    BQ27510 电量计的校准 的 C语言实现
    嵌入式Linux开发教程:Linux常见命令(上篇)
    技术团队的情绪与效率
    如何有效使用Project(2)——进度计划的执行与监控
  • 原文地址:https://www.cnblogs.com/beiz/p/4990712.html
Copyright © 2011-2022 走看看