• 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程序设计有所帮助。

  • 相关阅读:
    部门创建注意问题
    我的技术博客开通啦~
    听侯钟雷老师的讲座,确认了几个问题。
    Dynamics CRM 批量添加用户时,报错:Server was unable to process request.
    汉字的Unicode范围(转)
    转载:Apache1.1 post请求无body的bug
    转载:Android有效解决加载大图片时内存溢出的问题
    2.2之前的webkit crash问题
    转载:Expect:100Continue & HTTP 417 Expectation
    城市旅游问题
  • 原文地址:https://www.cnblogs.com/beiz/p/4990712.html
Copyright © 2020-2023  润新知