章节
问答
课签
笔记
评论
占位
占位

DOM替换replaceWith()和replaceAll()

之前学习了节点的内插入、外插入以及删除方法,这节会学习替换方法replaceWith

.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方法替换后的节点

任务

?不会了怎么办
||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?