jquey学习2之jquery动态添加页面片段

第一个方法:append()方法

    【1】$(selector).append(content)//向匹配的所有标签中的内容末尾处添加Html代码,会编译成页面显示。 

jquey学习2之jquery动态添加页面片段
 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>This is a paragraph.</p>
14 <p>This is another paragraph.</p>
15 <button>在每个 p 元素的结尾添加内容</button>
16 </body>
17 </html>
View Code

    【2】$(selector).append(function(index,html))//利用函数,向匹配的所有标签中的内容末尾处添加html代码。会编译成页面显示。

jquey学习2之jquery动态添加页面片段
 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>This is a heading</h1>
17 <p>This is a paragraph.</p>
18 <p>This is another paragraph.</p>
19 <button>在每个 p 元素的结尾添加内容</button>
20 </body>
21 </html>
View Code

fads

jquey学习2之jquery动态添加页面片段,布布扣,bubuko.com

jquey学习2之jquery动态添加页面片段

上一篇:vivo手机,自带世界之窗浏览器,sessionStorage设置的值为null


下一篇:Visual Prolog 的 Web 专家系统 (10)