码迷,mamicode.com
首页 > 移动开发 > 详细

J-Query开发锦集(3):appendTo()方法和append()方法

时间:2014-08-19 12:22:14      阅读:391      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   java   使用   os   io   strong   

appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。

bubuko.com,布布扣

提示:append() 和 appendTo() 方法执行的任务相同。不同之处在于:内容和选择器的位置,以及 append() 能够使用函数来附加内容。

appendTo()方法代码展示:

 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 World!</b>").appendTo("p");
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 <p>这是一个段落.</p>
14 <p>这是另一个段落.</p>
15 <button>在每个 p 元素的结尾添加内容</button>
16 </body>
17 </html>

效果如下:

bubuko.com,布布扣

appendTo()方法代码展示:

 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 world!</b>");
 8   });
 9 });
10 </script>
11 </head>
12 <body>
13 <p>这是一个段落.</p>
14 <p>这是另一个段落.</p>
15 <button>在每个 p 元素的结尾添加内容</button>
16 </body>
17 </html>

效果如下:

bubuko.com,布布扣

 说明:append() 方法在被选元素的结尾(仍然在内部)插入指定内容。

bubuko.com,布布扣

 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(function(n){
 8       return "<b>This p element has index " + n + "</b>";
 9     });
10   });
11 });
12 </script>
13 </head>
14 
15 <body>
16 <h1>阿萨德法国红酒快乐</h1>
17 <p>阿萨德法国红酒快乐</p>
18 <p>阿萨德法国红酒快乐</p>
19 <button>在每个 p 元素的结尾添加内容</button>
20 </body>
21 </html>

效果如下:

bubuko.com,布布扣

J-Query开发锦集(3):appendTo()方法和append()方法,布布扣,bubuko.com

J-Query开发锦集(3):appendTo()方法和append()方法

标签:style   blog   color   java   使用   os   io   strong   

原文地址:http://www.cnblogs.com/liubeimeng/p/3921508.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!