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>

[jQuery] jQuery添加和删除元素

相关帖子

nginx启ssi方法，宝塔面板nginx开启ssi

js数组怎么删除某一项

常用HTML网页跳转的几种方法

Word页眉和空白页总删除不掉的解决方法

ZBlogPhp为网站添加随机背景

CSS3荧光灯文字闪烁动画特效

如何将本地已有项目添加到git仓库

利用html+js触发弹窗事件

利用HTML、CSS和JS制作随机密码生成器

node Express学习之聊聊中间件

绝代码农 LV4