替换节点 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 可能不能实现效果

转载于:https://www.cnblogs.com/bichen-01/p/11516228.html

替换节点 replaceWith 与 replaceAll的区别相关推荐

jQuery中replaceWith、replaceAll的区别和用法
一.replaceWith()方法: replaceWith(content|fn) :将所有匹配的元素替换成指定的HTML或DOM元素. html代码如下: <span>Hello< ...
jQuery节点操作创建节点元素删除节点替换节点复制节点等基本本操作
节点操作 jQuery中节点操作查找节点(前面章节已讲) 创建节点插入节点删除节点替换节点复制节点创建节点元素工厂函数$()用于获取或创建节点 $(selector):通过选择器获取节点 ...
Jquery中替换节点的方法replaceWith（）和replaceAll（）
本文转自:http://www.cnblogs.com/shuang121/archive/2011/12/27/2303748.html 在jquery中,我们可以通过replaceWith()和r ...
DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法，这节会学习替换方法replaceWith .replaceWith( newConten
DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入.外插入以及删除方法,这节会学习替换方法replaceWith .replaceWith( newContent ...
DOM替换replaceWith()和replaceAll()
replaceWith()和replaceAll()方法用起来总是会混淆,下面将说明一下这两者之间的区别于一年.. .replaceWith( newContent ):用提供的内容替换集合中所有匹配 ...
jquery删除替换元素remove、detach、empty、replaceWith、replaceAll
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-DOM操作全解 jquery删除替换元素 jquery中进行删除替换元素的函数包括remove.detach.empty.replaceWi ...
jQuery之替换节点
如果要替换节点,jQuery提供了两个方法:replaceWith()和replaceAll(). 两个方法的作用相同,只是操作颠倒了. 作用:将所有匹配的元素都替换成指定的HTML或者DOM元素.( ...
jquery替换节点
jquery提供的替换节点的方法有两个:replaceWith()和replaceAll(). 1.replaceWith()方法语法:$(selectorA).replaceWitj(dom); ...
python中的replaceall_jQuery replaceWith()和replaceAll()方法
在 jQuery 中,如果想要替换元素,我们用 replaceWith() 方法和 replaceAll() 方法来实现.下面进行分别介绍. jQuery replaceWith()方法在 jQue ...

替换节点 replaceWith 与 replaceAll的区别

替换节点 replaceWith 与 replaceAll的区别相关推荐

最新文章

热门文章