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>
效果如下:
J-Query开发锦集(3):appendTo()方法和append()方法
时间： 2024-10-14 04:07:40