在jQuery中，如果想要替换元素，我们有以下2种方法。

  • （1）replaceWith()
  • （2）replaceAll()

一、replaceWith()

在jQuery中，我们可以使用replaceWith()方法来将所选元素替换成其他元素。

语法：

$(A).replaceWith(B)

说明：

$(A).replaceWith(B)表示使用B来替换A。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $("strong").replaceWith('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>');
            });
        })
    </script>
</head>
<body>
    <strong>jQuery教程</strong><br/>
    <input id="btn" type="button" value="替换" />
</body>
</html>

默认情况下，浏览器预览效果如下图所示。

当我们点击【替换】按钮后，此时预览效果如下图所示。

二、replaceAll()

在jQuery中，replaceAll()和replaceWith()这两个方法功能相似，都是将某个元素替换成其他元素，但是两者的操作对象却是颠倒的。

语法：

$(A).replaceAll(B)

说明：

$(A).replaceAll(B)表示用A来替换B。对于replaceAll()和replaceWith()这两个方法，我们可以根据英文意思来帮助理解和记忆。

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                $('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>').replaceAll("strong");
            });
        })
    </script>
</head>
<body>
    <strong>jQuery教程</strong><br/>
    <input id="btn" type="button" value="替换" />
</body>
</html>

默认情况下，预览效果如下图所示。

当我们点击“替换”按钮后，此时预览效果如下图所示。

分析：

在下面代码中，这两种插入节点的方式是等价的。

//方式1
$("strong").replaceWith('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>');
//方式2
$('<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>').replaceAll("strong");

此外，对于replaceAll()和replaceWith()这两个方法，我们只需要掌握其中一种就可以了。