appendTo()方法和append()方法

最新推荐文章于 2022-05-16 21:21:17 发布

weixin_30657999

最新推荐文章于 2022-05-16 21:21:17 发布

阅读量413

点赞数 1

文章标签： c# javascript ViewUI

原文链接：http://www.cnblogs.com/liubeimeng/p/3921508.html

版权

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>

效果如下:

转载于:https://www.cnblogs.com/liubeimeng/p/3921508.html

weixin_30657999

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
appendTo()方法和append()方法

appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。appendTo()方法代码展示: 1 <html> 2 <head> 3 <script type="text/jav...
复制链接

扫一扫