首页 > 其他分享> 文章详细

替换节点 replaceWith 与 replaceAll的区别

2019-09-13 10:58:39 阅读：241 来源： 互联网

标签：old replaceWith replaceAll 使用字符串 new 节点

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

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

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 可能不能实现效果

标签：old,replaceWith,replaceAll,使用,字符串,new,节点
来源： https://www.cnblogs.com/bichen-01/p/11516228.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

替换节点 replaceWith 与 replaceAll的区别