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

  • 相关阅读:
    关于架构,关于系统,关于合作,我也得问问我们自己
    vs2013 无法打开 源 文件 "SDKDDKVer.h"
    视频基础知识汇总
    python gRPC接口调用
    python多线程同时执行2个函数任务之threading
    git基本操作_快速查询
    pycharm激活码 我是搬运工
    CodeReview的一些原则
    python多线程执行同一个函数任务之threading、ThreadPoolExecutor.map
    python程序超时处理 timeout_decorator
  • 原文地址:https://www.cnblogs.com/beiz/p/4990712.html
Copyright © 2011-2022 走看看