jQuery替换元素

2,733字

12–17 分钟

jQuery替换元素是jQuery HTML元素操作的核心功能之一，指通过jQuery提供的专用方法，将指定DOM元素替换为新元素或已有元素，无需手动移除原有元素再插入新元素，大幅简化原生JavaScript替换元素的繁琐流程。jQuery替换元素的核心方法为replaceWith()与replaceAll()，两种方法功能一致但语法结构不同，适配不同开发场景，熟练掌握jQuery替换元素方法，能有效提升前端页面动态更新的开发效率。

核心替换方法

jQuery替换元素的核心方法仅有两种，分别为replaceWith()与replaceAll()，两种方法均可实现元素替换功能，核心区别在于调用主体与参数的位置不同，可根据代码编写习惯灵活选择，覆盖所有元素替换场景。

replaceWith()方法

replaceWith()方法用于将调用主体对应的DOM元素，替换为指定的新内容（新元素或已有元素），替换后原有元素会被移除，新内容会占据原有元素的位置，是jQuery替换元素中最常用的方法。

语法

// 将调用主体元素替换为指定内容
$(selector).replaceWith(content);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery replaceWith()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .old-box { border: 1px solid #000; padding: 10px; margin: 10px 0; }
        .new-box { border: 1px solid #f00; padding: 10px; margin: 10px 0; background-color: #ffe485; }
    </style>
</head>
<body>
    <div class="old-box" id="target">原有元素（将被替换）</div>
    <div class="old-box">未被替换的原有元素</div>

    <script>
        // 用新创建的元素替换指定元素
        $("#target").replaceWith("<div class='new-box'>replaceWith替换的新元素</div>");

        // 用页面中已有的元素替换指定元素
        var existingElem = $("<div class='new-box'>用已有元素替换</div>");
        $(".old-box").eq(0).replaceWith(existingElem);
    </script>
</body>
</html>

replaceAll()方法

replaceAll()方法与replaceWith()方法功能完全一致，均用于实现元素替换，区别在于语法结构相反，replaceAll()方法将新内容作为调用主体，将需要被替换的目标元素作为参数传入，语法灵活，适配不同代码编写场景。

语法

// 将调用主体内容替换掉指定选择器对应的元素
$(content).replaceAll(selector);

示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>jQuery replaceAll()方法示例</title>
    <script src="jquery.min.js"></script>
    <style>
        .old-box { border: 1px solid #000; padding: 10px; margin: 10px 0; }
        .new-box { border: 1px solid #00f; padding: 10px; margin: 10px 0; background-color: #e6f7ff; }
    </style>
</head>
<body>
    <div class="old-box" id="target1">原有元素1（将被替换）</div>
    <div class="old-box" id="target2">原有元素2（将被替换）</div>

    <script>
        // 用新创建的元素替换所有匹配的元素
        $("<div class='new-box'>replaceAll替换的新元素</div>").replaceAll(".old-box");

        // 用页面中已有的元素替换指定元素
        var existingElem = $("<div class='new-box'>用已有元素替换</div>");
        existingElem.replaceAll("#target1");
    </script>
</body>
</html>