最安全的方式是 createElement 配合 textContent；innerHTML 虽简单但需手动转义防 XSS，insertAdjacentHTML 更可控但同样需预处理，textContent 会丢失格式，pre+code+CSS 才能保留缩进换行。
直接用 innerHTML 赋值最简单，但不安全；真正要动态生成带语法高亮或可复制的 <code> 标签内容，得区分「只是显示代码字符串」和「渲染成带样式/交互的代码块」两种需求。
用 innerHTML 直接插入预格式化代码字符串
适合快速调试或内部工具页，但必须手动转义 HTML 特殊字符，否则会解析成真实标签甚至触发 XSS。
-
textContent或innerText可避免解析，但会丢失换行和空格缩进 - 若坚持用
innerHTML，必须先对<、>、&做转义：比如str.replace(/&/g, '&').replace(/, '<').replace(/>/g, '>') - 换行需包裹在
<pre><code>...</code></pre>中，并配 CSSwhite-space: pre-wrap才能保留格式
insertAdjacentHTML 插入带 class 的 code 块
比 innerHTML 更可控，尤其适合在已有 DOM 节点附近追加代码示例，且不破坏原有结构。
- 位置参数选
'beforeend'可插入容器末尾，'afterbegin'插入开头，避免误删兄弟节点 - 推荐写法：
el.insertAdjacentHTML('beforeend', '<pre class="js"><code>' + escapedCode + '</code></pre>') - 注意：
insertAdjacentHTML同样不自动转义，传入前必须确保字符串已处理
createElement 创建安全的 code 元素
唯一真正规避 XSS 风险的方式，尤其当代码内容来自用户输入或 API 返回时必须用这个。
立即学习“Java免费学习笔记（深入）”；
- 先
document.createElement('pre')，再document.createElement('code')，最后用textContent设置内容 - 这样所有尖括号、引号都会被原样显示，不会被浏览器解析为 HTML
- 如果需要添加语言标识（如
class="python"），用code.className = 'language-python'设置 - 批量插入多个代码块时，建议用
DocumentFragment减少重排重绘
最容易被忽略的是：哪怕只显示一段 JSON 或 HTML 片段，只要来源不可信，就别碰 innerHTML —— 一个未转义的 <script> 标签就能让整个页面执行任意 JS。安全不是“基本就这些”，而是每一步都要主动防御。
