createTextNode 安全是因为它原样插入文本、不解析HTML；需确保输入字符串已预处理，避免后续误用innerHTML导致XSS。
createTextNode 本身不处理转义，它只是创建纯文本节点
createTextNode 的行为是明确且固定的：它把传入的字符串**原样当作文本内容**插入 DOM，不会解析其中任何 HTML 标签或实体。这意味着你传 "<script>alert(1)</script>"，它显示出来的就是这串字符本身，而不是执行脚本——这不是因为它“做了转义”，而是因为它根本没进 HTML 解析流程。
所以关键点在于：你得确保传给 createTextNode 的字符串里，**已经不含未受控的原始 HTML 片段**。如果你从用户输入、URL 参数或 API 响应中直接取值并塞进去，而该值本就含 <、& 等字符，那它照样会以文本形式显示（这是安全的），但若你后续又用 innerHTML 拼接它，或者误把它当 HTML 字符串渲染，风险就回来了。
什么时候用 createTextNode 是安全的？看使用场景
典型安全场景包括：
- 把用户昵称、评论正文、日志消息等纯内容插入到
<div>、<p>等容器中，且只通过appendChild(textNode)或textContent = ...设置 - 动态生成表单 label、按钮文字、提示文案等由 JS 控制的静态文本
- 配合
DocumentFragment批量构建文本节点再一次性挂载
不安全的反例：el.innerHTML += '<span>' + text + '</span>' —— 即使 text 来自 createTextNode 的输入源，这里也绕过了它的保护机制，直接走 HTML 解析。
立即学习“前端免费学习笔记（深入）”；
如何准备传给 createTextNode 的字符串？别依赖它来“消毒”
如果你拿到的是可能含 HTML 字符的原始字符串（比如用户输入的 "1 4"），而你希望它在页面上**作为可见文本显示**（即显示成 “1 < 2 & 3 > 4”），那你需要提前做 HTML 实体编码。这不是 createTextNode 的职责，而是你数据准备阶段的事。
简单可靠的编码方式（不引入第三方库）：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
function htmlEscape(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
然后使用：const safeText = htmlEscape(userInput); const node = document.createTextNode(safeText);
注意：不要用正则手动替换 &、<、>，容易漏掉 "、' 或 Unicode 变体；上面这个 trick 利用了浏览器原生的 textContent → innerHTML 转换，覆盖全面。
对比 innerHTML 和 textContent：别混淆“显示效果”和“安全性来源”
很多人误以为 textContent “比 innerHTML 更安全”，其实真正起作用的是：前者强制走文本路径，后者开放 HTML 解析。而 createTextNode 就是 textContent 底层的原始构造方式。
以下三者等效且都安全（前提是值已准备好）：
el.textContent = userInput;el.appendChild(document.createTextNode(userInput));el.replaceChildren(document.createTextNode(userInput));
但如果你写成：el.innerHTML = userInput;，哪怕 userInput 是 document.createTextNode(...).nodeValue，只要它含未编码的 <script>，就会执行——因为 innerHTML 不关心你这串字符串是怎么来的，只按 HTML 规则解析。
最容易被忽略的一点：服务端返回的 JSON 字段如果本身已做 HTML 编码（比如 "<script>"</script>），你在前端再用 htmlEscape 就会导致双重编码（显示为 <script></script>）。是否编码，必须前后端对齐，不能靠 JS 节点创建函数来补救。
