通过innerHTML设置纯文本时的内容变更问题及相关咨询

这不是个别问题，浏览器解析innerHTML时存在多种隐性内容转换 #

当你用innerHTML赋值时，浏览器会把输入内容当作HTML解析而非纯文本，这类转换是普遍存在的，常见情况包括：

• 连续的空格、换行符、制表符会被合并为单个空格
• 特殊字符（如<、>、&）会被自动转义为HTML实体（比如<变成<）
• 如果输入内容符合HTML标签语法，会被直接解析为DOM元素，而非保留为纯文本

确保文本内容完全一致的便捷方法 #

如果不想手动构建文本节点，有两种更高效的方案：

1. 使用textContent属性
   这是最直接的方式，textContent会把赋值内容当作纯文本处理，不做任何HTML解析，完全保留原始字符（包括换行、空格、特殊符号）。示例：

   element.textContent = '\n';
   

   这样元素内的文本节点就会精确保留换行符，不会被转换成空格。

2. 混合HTML与纯文本时的处理
   如果确实需要同时插入HTML结构和纯文本内容，可以把需要保留原始格式的纯文本部分用document.createTextNode()创建，再插入到对应的DOM结构中，最后把整个结构挂载到目标元素上。这种方式比全手动构建所有节点灵活，也能保证纯文本内容的准确性。

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