DOM替换replaceWith()和replaceAll()

replaceWith()和replaceAll()方法用起来总是会混淆，下面将说明一下这两者之间的区别于一年、、

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

简单来说：用$()选择节点A，调用replaceWith方法，传入一个新的内容B（HTML字符串，DOM元素，或者jQuery对象）用来替换选中的节点A

看个简单的例子：一段HTML代码

<div><p>第一段</p><p>第二段</p><p>第三段</p>
</div>

替换第二段的节点与内容

$("p:eq(1)").replaceWith('<a style="color:red">替换第二段的内容</a>')

通过jQuery筛选出第二个p元素，调用replaceWith进行替换，结果如下

<div><p>第一段</p><a style="color:red">替换第二段的内容</a>'<p>第三段</p>
</div>

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理

$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')

总结：

.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

DOM替换replaceWith()和replaceAll()相关推荐

DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法，这节会学习替换方法replaceWith .replaceWith( newConten
DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入.外插入以及删除方法,这节会学习替换方法replaceWith .replaceWith( newContent ...
jquery删除替换元素remove、detach、empty、replaceWith、replaceAll
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-DOM操作全解 jquery删除替换元素 jquery中进行删除替换元素的函数包括remove.detach.empty.replaceWi ...
替换节点 replaceWith 与 replaceAll的区别
---恢复内容开始--- 首先我主要从两方面来说: 1.大的方面 2.小的方面直接用代码来实践: 从大的方面: <!DOCTYPE html> <html lang="e ...
jQuery中的replaceWith和replaceAll方法
在jQuery中有两个方法可以执行对标签的替换操作,replaceWith()和replaceAll()方法: replaceWith() :将所有匹配的元素替换成指定的HTML或DOM元素. rep ...
jQuery中replaceWith()与replaceAll()方法
replaceWith()与replaceAll()两个方法作用相同. 见代码 <!DOCTYPE html> <html><head><meta chars ...
jQuery -- 替换指定节点 replaceAll replaceWith
<body><h3>例子</h3><ul><li title="苹果" id="app">苹果1&l ...
jQuery中replaceWith与replaceAll
replaceWith(content|fn) :将所有匹配的元素替换成指定的HTML或DOM元素. replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素. ...
jQuery中replaceWith与replaceAll方法
replaceWith(content|fn) :将所有匹配的元素替换成指定的HTML或DOM元素. replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素. ...
jQuery中replaceWith、replaceAll的区别和用法
一.replaceWith()方法: replaceWith(content|fn) :将所有匹配的元素替换成指定的HTML或DOM元素. html代码如下: <span>Hello< ...

DOM替换replaceWith()和replaceAll()

DOM替换replaceWith()和replaceAll()相关推荐

最新文章

热门文章