jQuery添加和删除元素

Posted sueyyyy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

     

以上是关于jQuery添加和删除元素的主要内容,如果未能解决你的问题,请参考以下文章

使用带有添加和删除元素条件的 jQuery 克隆表单

jQuery 添加和删除HTML元素

jQuery 添加元素和删除元素

jquery 如何动态添加、删除class样式

JQuery添加元素和删除元素几种方法的区别

jQuery如何为指定标签添加和删除一个样式