优先用textContent+createElement组合，innerHTML仅用于可信富文本；需过滤时用DOMPurify，批量操作用DocumentFragment，表格插入须经tbody或insertRow，动态元素需手动清理引用防泄漏。
直接用 innerHTML 最快，但容易 XSS；想安全又可控，优先选 textContent + createElement 组合。
什么时候该用 innerHTML，什么时候不该用
innerHTML 适合插入已知可信、结构固定的小段 HTML，比如后台返回的富文本摘要、预渲染的卡片片段。但它会完全重写目标元素子树，触发重排重绘，且不校验内容安全性——如果插入用户输入或未转义的数据，<script>alert(1)</script> 会直接执行。
- 能用
textContent就别用innerHTML：纯文本场景下更轻、更安全、更快 - 必须插 HTML 时，先用
DOMPurify.sanitize()过滤（不要自己正则替换） - 避免在循环里反复赋值
innerHTML，会导致多次 DOM 重建，改用文档片段DocumentFragment批量插入
createElement + appendChild 的典型误用点
很多人以为只要不用 innerHTML 就绝对安全，其实不然。比如把用户输入直接拼进 element.textContent 是安全的，但若误写成 element.innerHTML = '' + userInput + ''，风险照旧。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
createElement('div').textContent = userInput→ 安全，自动转义 -
createElement('div').innerHTML = '' + userInput + ''→ 危险，userInput 里的<script></script>仍会执行 - 批量插入多个元素时，别一个个
appendChild，先创建DocumentFragment，最后一次性挂载
动态插入表格行的常见卡点
表格 DOM 操作比普通元素更敏感：tr 必须放在 tbody 或 thead 内，不能直接 append 到 table；浏览器会自动补全缺失的包裹结构，但可能破坏预期样式或事件绑定。
- 正确做法：先
querySelector('tbody')或createTBody()，再对它调用appendChild(tr) - 用
insertRow()和insertCell()方法更稳妥，它们内置了语义校验 - 避免用
innerHTML += '...'更新表格，会清空已有tr上绑定的事件监听器
真正难的不是“怎么插”，而是“插完之后谁还持有引用”——动态插入的元素如果没手动清理事件或数据绑定，在单页应用里容易引发内存泄漏。这点常被忽略，尤其在频繁增删列表项的场景中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
