innerText与createTextNode()效果相似，前端开发时应该选择哪个？

二者虽然都能实现给DOM元素添加纯文本的效果，但底层逻辑和适用场景有明显区别：

• 本质定位不同
  createTextNode()是标准DOM节点创建API，作用是生成一个独立的文本节点对象，它本身不属于任何父元素，必须通过appendChild()、insertBefore()等节点挂载方法插入到DOM树中才会在页面生效。
  innerText是元素节点的属性，用于读取或覆盖元素内部的所有文本内容，是浏览器封装的高层操作，赋值时会自动完成「清空原有子节点→创建文本节点→插入到元素内部」的全流程。
• 内容操作的副作用不同
  给innerText赋值会直接清空目标元素内所有已有的子节点（包括元素、文本、注释等所有类型节点），再插入新的文本内容。
  createTextNode()只会生成新的文本节点，不会修改目标元素的原有内容，你可以灵活选择将它插入到元素的任意位置（比如追加到原有内容末尾、插入到两个子元素中间）。
• 文本处理逻辑不同
  innerText读取和赋值时都会匹配元素的渲染状态：会自动忽略隐藏子元素的文本、将多行内容按渲染效果保留换行、合并多余的空白字符。
  createTextNode()会完全保留你传入的原始文本内容，不会做任何渲染相关的转换，插入到页面后的展示效果完全由CSS样式决定。
• 性能表现不同
  单次少量文本插入时二者性能差异可以忽略，但如果是频繁操作DOM、或者批量插入大量内容，createTextNode()配合文档片段批量挂载的性能会明显优于多次innerText赋值，因为每次innerText赋值都会触发一次DOM树修改和浏览器重排。

补充：二者都属于纯文本操作，会自动将HTML标签转义为普通文本展示，不存在XSS注入风险，这一点上表现一致。

• 如果你需要直接替换某个元素的全部内容为纯文本，优先用innerText，语法更简洁，不需要额外处理节点挂载逻辑。
• 如果你需要保留元素原有内容，仅在指定位置插入文本、或者需要批量构建DOM结构再一次性挂载到页面，优先用createTextNode()，灵活性和性能更好。
• 不要混淆innerText和innerHTML：innerHTML会解析传入内容中的HTML标签，存在XSS风险，仅在你明确需要插入HTML结构时使用。

内容的提问来源于stack exchange，提问作者Sushant