如何在原生HTML中创建多个文本节点且保持渲染效果一致

纯静态Vanilla HTML无法实现你描述的需求，没有任何原生HTML写法可以让浏览器解析出两个相邻的独立文本节点，同时渲染效果和<div>FooBar</div>完全一致。

HTML解析器遵循统一的标准解析规则：在解析元素的子内容时，所有连续的、没有被其他类型节点（元素节点、注释节点、处理指令节点等）打断的普通文本内容，会被自动合并为单个文本节点。哪怕你在文本中间加换行、空格，或是把文本拆成多行书写，解析时依然会被合并到同一个文本节点中，不存在任何语法可以在不插入其他类型节点的前提下，把一段连续文本拆成多个相邻的文本节点。

你可能试过的常见hack思路都不满足要求：

• 插入空元素（比如<span></span>）：会在两个文本中间插入额外的元素节点，不符合「两个独立text node相邻」的子节点结构要求；就算给空元素加display: none，DOM结构里的元素节点依然存在。
• 插入注释<!-- -->：会在两个文本中间插入注释节点，同样不符合纯两个文本节点相邻的结构要求。
• 插入零宽字符（比如​）：字符本身属于文本内容的一部分，不会拆分文本节点，且复制文本、光标定位时会感知到零宽字符的存在，无法做到和<div>FooBar</div>渲染效果100%一致。

这类需求在SSR引擎开发中非常常见，行业通用的落地方案是：

• 首屏SSR输出阶段，在需要拆分文本边界的位置插入无渲染的标记节点，比如<script type="text/hydration-boundary"></script>这类自定义类型的script标签，这类标签不会被浏览器渲染，完全不会影响页面布局和视觉效果。
• 客户端hydration逻辑执行时，识别到这类标记节点后将其移除，再按业务逻辑处理前后的文本节点即可，最终hydration完成后的DOM结构可以完全符合你的预期。

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