应优先使用textContent修改纯文本，用insertAdjacentHTML在指定位置插入HTML，避免直接使用innerHTML以防安全与性能问题。
直接用 innerHTML 替换最简单，但多数时候不该这么干——它会清空事件监听、丢失表单值、触发重排，还可能执行恶意脚本。真正安全、可控的替换方式，得看你要改的是什么、在哪改、谁在改。
用 textContent 改纯文字，不碰标签结构
当你只改“标题”“说明”“错误提示”这类用户可见的纯文本时，textContent 是首选。它把所有内容当字符串处理，不解析 HTML，天然防 XSS，性能也比 innerHTML 高。
- 适用场景：更新
<h2 id="title"></h2>里的标题文字、<p class="desc"></p>中的描述 - 别写
el.innerHTML = "Hello <strong>World</strong>"，那是引入风险；写el.textContent = "Hello <strong>World</strong>"，页面就真显示带尖括号的那串字符 - 注意：它会抹掉该元素下所有子节点（包括按钮、input），只留一个文本节点——所以不能用于“在段落里改某个词而不动按钮”
用 insertAdjacentHTML 在指定位置插新内容
要追加、前置或包裹某段 HTML，又不想重写整个容器，insertAdjacentHTML 比先读 innerHTML 再拼字符串再赋值干净得多。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 四个位置参数：
"beforebegin"（元素前）、"afterbegin"（内部开头）、"beforeend"（内部结尾）、"afterend"（元素后） - 例如：在
<div id="list"></div>末尾加一项：document.getElementById("list").insertAdjacentHTML("beforeend", "<li>New item</li>") - 它不干扰现有子节点的事件绑定和输入状态，适合动态列表、通知栏、日志流等场景
批量替换 HTML 文件？别用正则硬刚 <script></script> 和属性
VS Code 的 Ctrl+Shift+H（全局替换）快，但仅适用于：纯文本内容、完整标签片段、类名/ID 值——且必须确认目标字符串不出现在 href、data-、<script></script> 或注释里。
立即学习“前端免费学习笔记（深入）”；
- 常见翻车点：
old-text出现在<script>console.log("old-text")</script>里，一替全崩 - 正则模式下记得转义
.、*、?，否则/old.text/g会匹配oldXtext - 涉及属性值替换（如改所有
src="old.jpg"→src="new.jpg"），推荐用Cheerio（Node.js）或BeautifulSoup（Python）：它们按 DOM 树操作，自动跳过 script/style/注释，不会误伤
真正难的不是“怎么换”，而是“换哪里、换多少、换完还稳不稳”。DOM 层级深、含动态生成内容、有第三方脚本注入时，querySelectorAll + 循环 + 条件判断才是兜底方案——别指望一行正则通杀所有 HTML。
