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

浏览数：25 / 时间：2015年06月11日

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

提示：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>

效果如下:

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>

效果如下:

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

 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>