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 >追加文本</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>
文档来源：51CTO技术博客https://blog.51cto.com/suey/3268401
页:
[1]