zoukankan      html  css  js  c++  java
  • 替换节点 replaceWith 与 replaceAll的区别

    ---恢复内容开始---

    首先我主要从两方面来说:

    1、大的方面 

    2、小的方面

    直接用代码来实践:

    从大的方面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>替換節點</title>
        <script type="text/javascript" src="../jquery-3.4.1.min.js"></script>
    </head>
    <body>
    
    <div class="replace">
        <p id="a">一欸及</p>
        <p id="b">三体人</p>
    </div>
    
    <!--script要写在后面-->
    <script>
    
        /*
        兩種方法 1.replaceWith   2.replaceAll
         */
    
        //需求: 将div下面的p标签换成span标签
    
        //1、使用replaceWith(第一种方法)
        //语法 $(old).replaceWith(new);
        $("#a").replaceWith("<span>你好</span>");
    
    
        //2、使用replaceAll
        //语法:   $(new).replaceAll(old);
        $("<span>世界</span>").replaceAll("#b");
    
    
    </script>
    
    
    </body>
    </html>

    总结:     用法上不同 ,replaceWith是先旧的,后面写新的     replaceAll是先新的,后面才写旧的

    $(old).replaceWith(new);
    $(new).replaceAll(old);

    都能得到想要的结果(前提:     使用replaceAll方法中new里填的都是非字符串)

    从小的方面来说:

    原来页面结果

    使用replaceWith和replaceAll两者都在new中填的是非字符串

    结果为   :   (这里没有像上面一样一个占一行  是因为上面使用p标签隔开了 ,但这里没隔开没关系 不妨碍测试)

     很明显的看到 : 成功实现了效果

    使用replaceWith和replaceAll两者都在new中填的是字符串

    测试结果:

     很明显看到第一个replaceWith方法可以使用字符串达到效果,但replaceAll方法使用字符串却没报错但也没显示

    这里明显就是一个BUG 也就是replaceAll方法有一个坑 里面写字符串通常是没效果的

    ---恢复内容结束---

    首先我主要从两方面来说:

    1、大的方面 

    2、小的方面

    直接用代码来实践:

    从大的方面:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>替換節點</title>
        <script type="text/javascript" src="../jquery-3.4.1.min.js"></script>
    </head>
    <body>
    
    <div class="replace">
        <p id="a">一欸及</p>
        <p id="b">三体人</p>
    </div>
    
    <!--script要写在后面-->
    <script>
    
        /*
        兩種方法 1.replaceWith   2.replaceAll
         */
    
        //需求: 将div下面的p标签换成span标签
    
        //1、使用replaceWith(第一种方法)
        //语法 $(old).replaceWith(new);
        $("#a").replaceWith("<span>你好</span>");
    
    
        //2、使用replaceAll
        //语法:   $(new).replaceAll(old);
        $("<span>世界</span>").replaceAll("#b");
    
    
    </script>
    
    
    </body>
    </html>

    总结:     用法上不同 ,replaceWith是先旧的,后面写新的     replaceAll是先新的,后面才写旧的

    $(old).replaceWith(new);
    $(new).replaceAll(old);

    都能得到想要的结果(前提:     使用replaceAll方法中new里填的都是非字符串)

    小的方面来说:

    replaceAll方法中

    如果new里面填的是字符串的话那么

    原来页面结果

    使用replaceWith和replaceAll两者都在new中填的是非字符串

    结果为   :   (这里没有像上面一样一个占一行  是因为上面使用p标签隔开了 ,但这里没隔开没关系 不妨碍测试)

     很明显的看到 : 成功实现了效果

    使用replaceWith和replaceAll两者都在new中填的是字符串

    测试结果:

     很明显看到第一个replaceWith方法可以使用字符串达到效果,但replaceAll方法使用字符串却没报错但也没显示

    这里明显就是一个BUG 也就是replaceAll方法有一个坑 里面写字符串通常是没效果的

    最后总结:    通常情况下  ,如果 new里填非字符串

    replaceWith 和 replaceAll 两者都能实现效果

    但如果 new里填的是字符串

    那replaceWith可以实现 ,但replaceAll 可能不能实现效果

  • 相关阅读:
    git pull --rebase 做了什么? 以及 Cannot rebase: You have unstaged changes 解决办法
    Android pix转换为sp
    职业四象限,分分钟定位你的方向
    我的微信公众号开通了!
    Android PermissionChecker 权限全面详细分析和解决方案
    Android沉浸式(侵入式)标题栏(状态栏)Status(三)
    Android沉浸式(侵入式)标题栏(状态栏)Status(二)
    Android沉浸式(侵入式)标题栏(状态栏)Status(一)
    为毛老抱怨工资低又不离职
    面试题:return和finally执行
  • 原文地址:https://www.cnblogs.com/bichen-01/p/11516228.html
Copyright © 2011-2022 走看看