码迷,mamicode.com
首页 > Web开发 > 详细

jQuery添加和删除元素

时间:2018-07-09 23:14:00      阅读:441      评论:0      收藏:0      [点我收藏+]

标签:src   har   cdn   col   cti   color   jquer   列表项   学习   

添加新的 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>

     

jQuery添加和删除元素

标签:src   har   cdn   col   cti   color   jquer   列表项   学习   

原文地址:https://www.cnblogs.com/sueyyyy/p/9286407.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!