createtextnode创建纯文本节点，不解析html标签；innerhtml则会将字符串作为html解析并渲染。例如，createtextnode("text")显示原样字符，innerhtml="text"则显示加粗文本。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

createTextNode 是什么，它和 innerHTML 有什么区别 createTextNode 是 DOM API 提供的原生方法，用于创建纯文本节点（Text node），不经过 HTML 解析。它返回一个 Text 对象，内容会被当作字符串字面量处理，不会触发标签解析或脚本执行。 这和直接设置 innerHTML 有本质区别：innerHTML = "<b>hello</b>" 会生成 <b></b> 元素；而 createTextNode("<b>hello</b>") 创建的只是一个包含 11 个字符的文本节点——包括尖括号和字母，浏览器会原样显示为 <b>hello</b>。 常见错误现象：想用 createTextNode 插入带样式的文字，结果页面上直接看到 HTML 标签源码。

使用场景包括：

• 动态插入用户输入内容，防止 XSS（比如评论、表单反馈）
• 在已有元素中追加说明性纯文本（如 label 后加冒号、单位）
• 构建 DOM 时需要严格区分 Element 和 Text 节点的结构

怎么正确调用 createTextNode 并添加到页面 createTextNode 必须通过 document 对象调用，不能直接写 createTextNode("x") 或 this.createTextNode。 它只接受一个参数：字符串。传入非字符串值（如数字、null、undefined）会被自动转为字符串，但建议显式转换以避免意外，比如 String(value) 或模板字面量。 添加到页面需配合 appendChild、insertBefore 等方法：

const textNode = document.createTextNode("已加载");
const container = document.getElementById("status");
container.appendChild(textNode);

注意：不能把 Text 节点直接传给 innerHTML，也不能用 append() 以外的“高阶”方法混用（比如 before() 在旧版 Safari 中对 Text 节点支持不稳定）。

为什么有时 appendChild(createTextNode(...)) 没反应 最常见原因是目标父节点不存在，或 JS 执行时机过早（DOM 尚未就绪）。检查 container 是否为 null，可加一层防御：

if (container) {
  container.appendChild(document.createTextNode("✅"));
}

另一个容易被忽略的点：createTextNode("") 创建的是空文本节点，它确实存在，但不占渲染空间。如果你期望看到换行或空白，得用 （空格）、 （ ）或 CSS 控制，纯空字符串文本节点无法被选中、无法触发 mouseenter，也几乎不影响布局。 还有兼容性问题：createTextNode 在 IE6+ 和所有现代浏览器都支持，但若你用的是 Shadow DOM v1（attachShadow），需确保在正确的 document 上调用——比如在 shadow root 内部，应使用其 ownerDocument，而非全局 document。

替代方案：什么时候不该用 createTextNode 如果目标是插入含简单 HTML 的富文本（比如仅允许 <strong></strong>、<em></em>），createTextNode 就太重了——它连标签都不认。此时更合适的是：

• 用 textContent 属性（更简洁，等效于先清空再 createTextNode + appendChild）
• 对可信内容用 innerHTML，但务必过滤或白名单校验
• 需要组合文本与元素时，改用 DocumentFragment + 多次 appendChild

另外，React/Vue 等框架内部已封装节点创建逻辑，直接写 JSX 或模板即可，手动调用 createTextNode 反而破坏抽象层，除非你在写自定义 renderer 或 patch 函数。 真正需要手写 createTextNode 的地方，往往卡在「必须保证某段文字绝对不被解析」这个边界条件上——比如调试时输出 HTML 字符串本身，或者实现一个简易的 HTML 转义预览框。这种时候，漏掉一个 document. 前缀，或误当成构造函数调用，就是最常踩的坑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！