replaceChild 是底层 DOM 替换方法，需结合模板管理、状态逻辑与 DOM 操作实现卡片视图切换：准备 template 或渲染函数生成 Node 实例，定位内容容器，缓存旧节点，再调用 replaceChild 安全替换。
replaceChild 本身不是用来“切换卡片组件视图模板”的直接工具，它只是 DOM API 中一个底层的节点替换方法。真正实现动态切换卡片视图，需要结合模板管理、条件逻辑和 DOM 操作三者配合。核心思路是：准备多个视图模板（如 HTML 字符串或已挂载的 DOM 片段），根据状态决定用哪个模板创建新内容，再用 replaceChild 替换旧内容。
准备可复用的视图模板
不要每次拼接字符串，推荐用 <template> 标签或函数封装不同视图：
- 在 HTML 中定义多个
<template id="card-view-list">、<template id="card-view-detail">等，保持结构清晰 - 或用函数返回 DocumentFragment，例如：
const renderListView = () => { const frag = document.createDocumentFragment(); /* 插入列表结构 */ return frag; };
获取目标容器并缓存旧子节点
确保你操作的是卡片内部的“内容区”，而不是整个卡片元素本身（避免丢失事件监听器或样式类）：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- 给卡片加一个内容占位节点：
<div class="card-content" id="card-content"></div> - 用
const container = document.getElementById('card-content');获取容器 - 如果容器已有子节点，先保存引用：
const oldContent = container.firstChild;（注意：只支持单子节点替换；若需多节点，用replaceChildren或清空后append）
用 replaceChild 执行替换
关键点：新节点必须是已创建的 Node 实例，不能是字符串；且必须属于同一文档上下文：
立即学习“Java免费学习笔记（深入）”；
- 正确做法：
container.replaceChild(newFragment, oldContent); - 错误写法：
container.replaceChild('<div>new</div>', oldContent);—— 字符串不会自动解析为节点 - 若无旧节点，不能直接调用
replaceChild；应改用appendChild或先判断：oldContent ? container.replaceChild(newNode, oldContent) : container.appendChild(newNode);
结合状态驱动切换（例如点击切换详情/概览）
把模板选择和 DOM 替换封装成一个更新函数，响应数据变化：
- 维护一个状态变量：
let currentView = 'list'; - 绑定按钮事件：
btnDetail.addEventListener('click', () => { currentView = 'detail'; updateCardView(); }); - 更新函数内判断：
const newContent = currentView === 'list' ? renderListView() : renderDetailView();，再执行替换
