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

  • 相关阅读:
    将不确定变为确定~接口应该是什么
    架构,改善程序复用性的设计~目录(附核心原代码)
    php实战第二十五天
    java一道简单的括号匹配问题
    屈原坐上神十带来了iOS 7
    《别独自用餐》 警句摘录
    php实战第二十四天
    偷了世界的程序员
    变故
    “快排”笔记
  • 原文地址:https://www.cnblogs.com/beiz/p/4990712.html
Copyright © 2011-2022 走看看