jQuery添加和删除元素

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容 
     1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(document).ready(function(){
 9     var i = 0;
10   $("#btn1").click(function(){
11       i ++ ;
12     $("p").append("<b>" + i + "</b>" + "   ");
13   });
14 
15   $("#btn2").click(function(){
16     $("ol").append("<li>添加列表</li>");
17   });
18 });
19 </script>
20 </head>
21 
22 <body>
23 <p>Number：</p>
24 <ol>
25 <li>List item 1</li>
26 <li>List item 2</li>
27 <li>List item 3</li>
28 </ol>
29 <button id="btn1">添加文本数字</button>
30 <button id="btn2">添加列表项</button>
31 <hr>
32 <button onclick="appendText()">追加文本</button>
33 </body>
34 
35 <script>
36 function appendText(){
37     var txt1="<b>文本------</b>";              // 使用 HTML 标签创建文本
38     var txt2=$("<u></u>").text("文本-----");  // 使用 jQuery 创建文本
39     var txt3=document.createElement("i");
40     txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
41     $("body").append(txt1,txt2,txt3);        // 追加新元素
42 }
43 </script>
44 </html>

     

posted @ 2018-07-09 22:14  少说点话  阅读(1460)  评论(0)  编辑  收藏  举报
网站运行：