zoukankan      html  css  js  c++  java
  • jQuery学习笔记——添加和删除元素

    jQuery——添加和删除元素

    4个添加新内容的方法:

    .append(); //被选元素结尾插入内容

    如: $("p").append("Some appended text.");

    .prepend(); //被选元素开头插入内容

    如: $("p").prepend("Some prepend text.");

    ——————————————————————————

    .append()和.prepend()连续添加若干新元素:

    $("p").append(txt1, txt2, txt3); //以此类推

    ——————————————————————————

    .after(); //被选元素之后插入内容

    如: $("p").after("Some prepend text.");

    .before(); //被选元素之前插入内容

    如: $("p").before("Some prepend text.");

    ——————————————————————————

    .after()和.before()连续添加若干新元素:

    $("p").after(txt1, txt2, txt3); //以此类推

    ——————————————————————————

    那么,两组的区别是什么呢?

    <1> .append()和.after()区别

    append实在当前元素"内部最后"边插入元素
    after是在当前元素"后面外"插入元素

    <2> .prepend()和.before()区别

    prepend实在当前元素"内部最前"边插入元素
    before是在当前元素"前面外"插入元素

    区别可从以下例子看出:

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="UTF-8">
            <title></title>
            <script type="text/javascript" src="dist/js/jquery-2.1.0.js"></script>
            <script type="text/javascript">
                $(function() {
                    $("#appendTarget").append(",BMW,AUDI,BUICK");
                    $("#prependTarget").prepend("Porsches,");
                    $("#afterTarget").after(":S600L");
                    $("#beforeTarget").before("Brand:");
                })
            </script>
        </head>
    
        <body>
            <p id="appendTarget">BENZ</p>
            <p id="prependTarget">BENZ</p>
            <p id="afterTarget">BENZ</p>
            <p id="beforeTarget">BENZ</p>
        </body>
    
    </html>

    结果:

    源码:

    <body>
        <p id="appendTarget">BENZ,BMW,AUDI,BUICK</p>
        <p id="prependTarget">Porsches,BENZ</p>
        <p id="afterTarget">BENZ</p>:S600L
        Brand:<p id="beforeTarget">BENZ</p>
    </body>

    从源码可以看出,他们之间的区别了。

    2个删除元素/内容方法:

    .remove(); //删除被选元素

    如: $("#delTarget").remove();

    ->扩展:
      如,删除class="italic"的所有<p>元素:

      $("p").remove(".italic");

    .empty(); //从被选元素中删除子元素

    如: $("#div1").empty();

  • 相关阅读:
    【LeetCode】17. Letter Combinations of a Phone Number
    【LeetCode】16. 3Sum Closest
    【LeetCode】15. 3Sum 三个数和为0
    【LeetCode】14. Longest Common Prefix 最长前缀子串
    【LeetCode】13. Roman to Integer 罗马数字转整数
    【LeetCode】12. Integer to Roman 整型数转罗马数
    【LeetCode】11. Container With Most Water
    【LeetCode】10. Regular Expression Matching
    Models of good programmer
    RSA Algorithm
  • 原文地址:https://www.cnblogs.com/Min-min/p/6050873.html
Copyright © 2011-2022 走看看