DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法，这节会学习替换方法replaceWith .replaceWith( newConten

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

<!DOCTYPE html>
<html>

.right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>replaceWith()和replaceAll()</h2>
    <div class="left">
        <button class="bt1">点击,通过replaceWith替换内容</button>
        <button class="bt2">点击,通过rreplaceAll替换内容</button>
    </div>
    <div class="right">
        <div>
            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
        </div>
        <div>
            <p>第四段</p>
            <p>第五段</p>
            <p>第六段</p>
        </div>
    </div>
    <script type="text/javascript">
    //只克隆节点
    //不克隆事件
    $(".bt1").on('click', function() {
        //找到内容为第二段的p元素
        //通过replaceWith删除并替换这个节点
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    })
    </script>
    <script type="text/javascript">
    //找到内容为第六段的p元素
    //通过replaceAll删除并替换这个节点
    $(".bt2").on('click', function() {
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
    })
    </script>
</body>

</html>

DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法，这节会学习替换方法replaceWith .replaceWith( newConten相关推荐

第十二讲 dom对象（DOM对象、document对象的常用方法、节点、查找结点、查看/修改/删除属性节点、创建和增加节点）
一.查看节点 getElementById( ) 元素的ID名称来访问,返回对拥有指定id的第一个对象的引用 getElementsByName( ) 按元素的name名称来访问,返回带有指定名称的 ...
三. 通过人事管理系统学习-----了解JSP的内置对象！！！（并且温习java基础的方法）
轻松学习JavaScript二十二：DOM编程学习之节点操作
DOM编程不仅仅可以查找三种节点,也可以操作节点,那就是创建,插入,删除,替换和复制节点.先来看节点操作方法: 还是借用一贯的HTML代码: <!DOCTYPE html PUB ...
DOM替换replaceWith()和replaceAll()
replaceWith()和replaceAll()方法用起来总是会混淆,下面将说明一下这两者之间的区别于一年.. .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()方法: replaceWith(content|fn) :将所有匹配的元素替换成指定的HTML或DOM元素. html代码如下: <span>Hello< ...
jQuery中replaceWith()与replaceAll()方法
replaceWith()与replaceAll()两个方法作用相同. 见代码 <!DOCTYPE html> <html><head><meta chars ...

DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法，这节会学习替换方法replaceWith .replaceWith( newConten

DOM替换replaceWith()和replaceAll()

DOM替换replaceWith()和replaceAll() 之前学习了节点的内插入、外插入以及删除方法，这节会学习替换方法replaceWith .replaceWith( newConten相关推荐

最新文章

热门文章