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

  • 相关阅读:
    CentOS 7 镜像下载
    Ambari+HDP生产集群搭建(二)
    elasticsearch-head 关闭窗口服务停止解决方案
    git提交错误 error: failed to push some refs to
    git提交错误 git config --global user.email "you@example.com" git config --global user.name "Your Name
    Java SE入门(一)——变量与数据类型
    markdown基本语法
    numpy的基本API(四)——拼接、拆分、添加、删除
    数理统计(二)——Python中的概率分布API
    统计学习方法与Python实现(三)——朴素贝叶斯法
  • 原文地址:https://www.cnblogs.com/beiz/p/4990712.html
Copyright © 2011-2022 走看看