最安全的方式是 createelement 配合 textcontent;innerhtml 虽简单但需手动转义防 xss,insertadjacenthtml 更可控但同样需预处理,textcontent 会丢失格式,pre+code+css 才能保留缩进换行。

直接用 innerHTML 赋值最简单,但不安全;真正要动态生成带语法高亮或可复制的 <code> 标签内容,得区分「只是显示代码字符串」和「渲染成带样式/交互的代码块」两种需求。
用 innerHTML 直接插入预格式化代码字符串
适合快速调试或内部工具页,但必须手动转义 HTML 特殊字符,否则会解析成真实标签甚至触发 XSS。
-
textContent或innerText可避免解析,但会丢失换行和空格缩进 - 若坚持用
innerHTML,必须先对、<code>>、&做转义:比如str.replace(/&/g, '&').replace(/, '/g, '>') - 换行需包裹在
<pre class="brush:php;toolbar:false;"><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 返回时必须用这个。
- 先
document.createElement('pre'),再document.createElement('code'),最后用textContent设置内容 - 这样所有尖括号、引号都会被原样显示,不会被浏览器解析为 HTML
- 如果需要添加语言标识(如
class="python"),用code.className = 'language-python'设置 - 批量插入多个代码块时,建议用
DocumentFragment减少重排重绘
最容易被忽略的是:哪怕只显示一段 JSON 或 HTML 片段,只要来源不可信,就别碰 innerHTML —— 一个未转义的 <script></script> 标签就能让整个页面执行任意 JS。安全不是“基本就这些”,而是每一步都要主动防御。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











