在动态操作 DOM 时，有时候我们不只是想修改元素内部的内容，而是想把整个元素连同它的标签一起换成新的结构。jQuery 的 replaceAll() 方法干的就是这件事，它用你指定的新 HTML 元素，把选中的目标元素及其内部所有内容全部替换掉，返回的是被替换后的新内容所对应的元素。
语法与参数约定
这个方法的基本形式是：
$(content).replaceAll(selector);
两个参数都是必填的。content 用来定义你要插入的新 HTML 内容，它必须是合法的 HTML 标签字符串，不能是纯文本。selector 则用来定位要被替换掉的目标元素，可以是标签名、ID 或者类名等有效的 CSS 选择器。
这里有一个很容易搞混的地方，我个人刚接触时也犯过迷糊。replaceAll() 的写法顺序和 replaceWith() 正好相反。replaceWith() 是先选中目标再指定新内容，而 replaceAll() 是先构造好新内容再指定要替换谁。两者功能上能达到同样的效果，但在链式操作里的可读性会不一样。我通常在已经拿到新内容对象，需要用它去覆盖多个目标时用 replaceAll()，因为这个方向更符合"用新东西替代旧东西"的思维。
示例一：用指定元素精确替换不同目标
下面这个例子展示了 replaceAll() 很灵活的一面。页面上有两个 div 块、一段文字和一个按钮。点击按钮后，第一个 div 会被替换成一个 h1 标题，第二个 div 替换成 h2 标题，段落文字被换成新的段落内容，连按钮本身也会被替换成一段新文字。每种替换都用了各自独立的调用，目标选择器也各不相同。
<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceAll() 精确替换示例 </title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
div {
border: 2px dashed blue;
width: auto;
margin: 8px;
font-size: 23px;
text-align: center;
}
h1, h2{
background-color: yellow;
color: blue;
}
#d3{
border: 2px solid blue;
width: 150px;
height: 15px;
}
</style>
</head>
<body>
<p> 代码号学习编程：replaceAll() 方法实战 </p>
<div id = "d1"> 这是一个 div 元素 </div>
<div id = "d2"> 这是另一个 div 元素 </div>
<p id = "p1"> 点击下方按钮查看替换效果 </p>
<button id = "btn"> 点击替换 </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("<h1> 你好，代码号世界 :) </h1>").replaceAll("#d1");
$("<h2> 欢迎来到代码号学习平台 </h2>").replaceAll("#d2");
$("<p> 这是替换后的段落内容 </p>").replaceAll("#p1");
$("<p> 按钮也被替换成了一段文字 </p>").replaceAll("#btn");
});
});
</script>
</body>
</html>
这个例子比较好地体现了 replaceAll() 在面对多个不同替换目标时，各自独立调用、互不干扰的特点。每一个调用都是一次完整的"取下旧元素、装入新结构"的操作。
示例二：批量替换同类元素
在页面中，可能需要一次性把所有同类型元素统一替换掉。下面这个例子中，页面上有多个段落元素和一个按钮。点击按钮后，所有的 p 标签连同它们各自的内容，都会被替换成同样的 h2 标题元素。
<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceAll() 批量替换示例 </title>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
h2{
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
<p> 代码号学习编程：批量替换同类元素 </p>
<p> 这是第一个段落元素 </p>
<p> 这是第二个段落元素 </p>
<p> 点击下方按钮查看批量替换效果。 </p>
<button id = "btn"> 全部替换 </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("<h2> 代码号，你好世界 :) </h2>").replaceAll("p");
});
});
</script>
</body>
</html>
注意这里的 $("<h2> 代码号，你好世界 :) </h2>").replaceAll("p") 这行代码，新内容只构造了一次，但 jQuery 会内部遍历所有匹配到的段落元素，逐一执行替换操作。这种批量处理的能力在需要对列表项、表格行做统一模板替换的场景里能省不少事。
示例三：使用伪类选择器做精确定位
replaceAll() 的 selector 参数支持各种 CSS 选择器组合，包括伪类。下面这个例子演示了用 :first-child 定位到第一个子元素来执行精准替换。页面中有两个 div 块，每个里面都包含其他元素，我们只把整个文档中第一个作为子元素出现的 div 整体替换成 h2 标题，其他 div 不受影响。
<!DOCTYPE html>
<html>
<head>
<title> jQuery replaceAll() 伪类定位示例 </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<style>
h2{
background-color: yellow;
color: blue;
}
div{
border: 2px solid blue;
}
</style>
</head>
<body>
<div>
<h3> 这是第一个 h3 标题 </h3>
<h3> 这是另一个 h3 标题 </h3>
</div>
<br>
<div>
<p> 这是第一个段落元素 </p>
<p> 这是另一个段落元素 </p>
</div>
<p> 点击下方按钮替换第一个 div 元素。 </p>
<button id = "btn"> 精准替换 </button>
<script>
$(document).ready(function(){
$("button").click(function() {
$("<h2> 代码号，你好世界 :) </h2>").replaceAll("div:first-child");
});
});
</script>
</body>
</html>
这个例子里的 div:first-child 选择器，只匹配作为其父元素第一个子节点的 div。点击按钮后，第一个 div 整个结构会被新 h2 标题取代，而第二个 div 安然无恙。这种精细化控制在处理复杂页面结构时很有价值。
本节课程知识要点
使用 replaceAll() 时需要注意，它执行的是"替换"而非"插入"，目标元素会从 DOM 树中彻底移除，连同它上面绑定的所有事件处理器和数据也会一起消失。如果你需要在替换后保留某些行为状态，就要在替换完成后重新做事件绑定。构造新内容的字符串中如果只给纯文本而没有 HTML 标签，jQuery 会认为这个选择器无效而直接返回空，不会执行任何替换。
