jQuery 的替换方法用于将匹配的元素直接替换为指定内容，主要包含 replaceWith() 和 replaceAll() 两个方法，常用于动态更新页面元素、替换失效内容、批量更新 DOM 结构等场景，下面结合示例详细讲解。
用于将每个匹配的元素替换为指定内容（原元素会被移除，新内容取而代之）。语法：
$(被替换的元素).replaceWith(新内容)参数：
content：HTML 字符串、DOM 元素、jQuery 对象（甚至可以是空值，用于删除元素）。
fn：回调函数，返回要替换的内容（index为元素索引，html为原元素的 HTML 内容）。
示例：
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<div id="wrap" class="wrap">替换后的元素</div>运行代码：
$('.inner').replaceWith($('#wrap'))将所有类为 inner 的元素使用 id 为 wrap 的元素进行替换，效果如下：
<div class="container">
<div id="wrap" class="wrap">替换后的元素</div>
<div id="wrap" class="wrap">替换后的元素</div>
</div>该方法的作用和 replaceWith 方法完全一致（替换目标元素），但调用主体和目标位置互换（相当于“用新内容替换所有匹配的目标元素”）。语法：
$(新内容).replaceAll(被替换的元素选择器)示例：
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<div id="wrap" class="wrap">替换后的元素</div>运行代码：
$('#wrap').replaceAll('.inner')将所有类为 inner 的元素使用 id 为 wrap 的元素进行替换，效果如下：
<div class="container">
<div id="wrap" class="wrap">替换后的元素</div>
<div id="wrap" class="wrap">替换后的元素</div>
</div>下面示例通过“点击自己动手试一试”可以尝试各种方法的效果：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQeury 教程</title>
<!-- 引入 jQuery 库 -->
<script type="text/javascript" src="https://www.hxstrive.com/cdn/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- 引入 loglevel 库，方便在 DOM 中打印日志 -->
<script src="https://www.hxstrive.com/preview_code/libs/custom_loglevel.js"></script>
<style>
button { background: #EEE !important; border: 1px solid #ccc !important;
min-width: 40px; padding: 5px; margin: 5px; cursor: pointer; }
h3 { font-size: 18px; }
.container { border: 1px solid blue; padding: 10px; }
.inner { border: 1px solid red; padding: 10px; margin: 5px; }
.wrap { box-shadow: inset 0 0 3px green; padding: 5px; margin: 5px; }
</style>
</head>
<body>
<div class="app">
<h3>替换</h3>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
<div id="wrap" class="wrap">替换后的元素</div>
</div>
<div>
<!-- replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素 -->
<button type="button" onclick="
// 替换所有 .inner 的元素为 #wrap
$('.inner').replaceWith($('#wrap'))
">$('.inner').replaceWith($('#wrap'))</button>
<!-- replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素 -->
<button type="button" onclick="
// 将 #wrap 替换掉所有 .inner
$('#wrap').replaceAll('.inner')
">$('#wrap').replaceAll('.inner')</button>
</div>
</body>
</html>更多关于 jQuery 的知识请阅读后续教程。
川公网安备51010802032098