DOM替换replaceWith()和replaceAll()

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方法替换后的节点
时间: 2024-11-03 11:36:33

DOM替换replaceWith()和replaceAll()的相关文章

java字符串的替换replace、replaceAll、replaceFirst的区别详解

如果不是刚刚复习了下正则表达式,我可能也不会注意到,原来String的replaceAll跟replaceFirst用到了正则表达式! 不多解释,看代码: 1 2 3 4 String s = "my.test.txt"; System.out.println(s.replace(".", "#")); System.out.println(s.replaceAll(".", "#")); System.o

DOM 替换节点案例

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> function replaceImg(){ var divNode=document.getElementById("div1"); v

java字符串的替换replace、replaceAll、replaceFirst的区别

如果不是刚刚复习了下正则表达式,我可能也不会注意到,原来String的replaceAll跟replaceFirst用到了正则表达式! 不多解释,看代码: String s = "my.test.txt"; System.out.println(s.replace(".", "#")); System.out.println(s.replaceAll(".", "#")); System.out.print

jQuery基础(DOM篇,append(),after(),prepend(),insertAfter(),节点删除,遍历方法each())

1.DOM创建节点及节点属性   创建流程比较简单,大体如下: - 创建节点(常见的:元素.属性和文本) - 添加节点的一些属性 - 加入到文档中   流程中涉及的一点方法: - 创建元素:document.createElement - 设置属性:setAttribute - 添加文本:innerHTML - 加入文档:appendChild   2.jQuery节点创建与属性的处理 创建元素节点: 可以有几种方式,后面会慢慢接触.常见的就是直接把这个节点的结构给通过HTML标记字符串描述出来

Jquery(二)——DOM篇(转)

DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览器提供的一些原生的方

jQuery基础——DOM篇

jQuery基础--DOM篇 在javascript中如何创建节点? 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 例子: document.addEventListener('click',function(){ //创建2个div元素 var rightdiv = document.cre

jQuery-2.DOM---节点的复制与替换

DOM拷贝clone() 克隆节点是DOM的常见操作,jQuery提供一个clone方法,专门用于处理dom的克隆 .clone()方法深度 复制所有匹配的元素集合,包括所有匹配元素.匹配元素的下级元素.文字节点. clone方法比较简单就是克隆节点,但是需要注意,如果节点有事件或者数据之类的其他处理,我们需要通过clone(ture)传递一个布尔值ture用来指定,这样不仅仅只是克隆单纯的节点结构,还要把附带的事件与数据给一并克隆了 例如: HTML部分 <div></div>

jQuery 基础总结

样式篇 $(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码; jQuery对象转化成DOM对象:jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素.jQuery自带的get()方法:转换为DOM对象 DOM对象转化成jQuery对象:$ 基本选择器:id选择器 类选择器 元素选择器 层级选择器: 子选择器:$('div > p') 选择所有div元素里面的第一个子元素P后代选择器:$('div p').css("

js_JQ

JS——01(课堂代码) 1.JavaScript常识: a.JavaScript与Java没有任何关系(原因是这名只是因为当时Java较火,命名者为了让人知道才取的这名): b.JS是最通用的脚本(让浏览器的行为去模仿人的行为叫脚本)语言,没有之一: c.JS由三部分组成: 1.ECMAScript:基本语法和标准 2.DOM(文档对象模型):文档(HTML文档)对象 3.BOM:浏览器对象 d.html:网站内容 CSS:网站的样式 JS:网站交互,数据传输 2.JS的引入: a.在HTML