首页 > 其他分享> > 替换节点 replaceWith 与 replaceAll的区别

替换节点 replaceWith 与 replaceAll的区别

2019-09-13 10:58:39 作者：互联网

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

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

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