修改HTML元素innerText后元素被删除，控制台无报错该如何排查？

问题原因排查方向 #

• DOM元素指向错误
  你所声明的papercounttext、papercosttext、ppctext三个DOM变量大概率指向了包含其他子元素的父容器，而非单独存放文本的节点。innerText赋值操作会直接清空目标元素内的所有子节点，再替换为你传入的文本内容，原本放在该容器内的其他元素就会被全部清除，看起来就像元素被删除了。这也是你怀疑的那行代码最可能触发的问题。
• 变量重复赋值
  如果在其他业务逻辑中，你重新对上述三个DOM变量做了赋值，使其指向了别的DOM节点，也可能出现修改文本时误清空其他节点内容的情况。
• 元素隐藏误判为删除
  如果存在CSS属性选择器规则（比如div:has(:empty) { display: none }、[text="xxx"] { visibility: hidden }等），修改innerText后元素匹配到了隐藏规则，会在页面上不可见，看起来类似被删除，实际节点还存在于DOM树中。
• numberWithCommas函数输出异常
  如果该函数返回值包含特殊控制字符，极端情况下会影响后续文本渲染，但该场景出现概率极低。

排查步骤 #

1. 打开浏览器开发者工具的「元素」面板，触发点击事件后搜索你认为被删除的元素的id或类名，如果能找到对应节点只是样式为隐藏，即可定位为CSS规则问题；如果找不到节点，就是被innerText赋值操作清空了。
2. 在你赋值innerText的代码前新增日志打印三个DOM变量：

console.log(papercounttext, papercosttext, ppctext)

触发点击后查看控制台打印的元素是不是你预期要修改的文本容器，确认没有误选父元素。
3. 单独测试格式化函数输出是否正常：

console.log(numberWithCommas(1000))

确认返回值是符合预期的格式化数字字符串，无异常内容。

修复建议 #

所有需要动态修改文本的位置，都单独用<span>标签包裹文本内容，仅获取该span节点作为修改目标，避免直接操作包含其他子元素的父容器：

<!-- 错误示例：父容器包含其他子元素，直接修改innerText会清空图标 -->
<div id="paper-count-wrap">
  <i class="paper-icon"></i>
  you have 0 sheets of paper
</div>

<!-- 正确示例：单独给动态文本套span -->
<div>
  <i class="paper-icon"></i>
  <span id="paper-count-text">you have 0 sheets of paper</span>
</div>

// 仅获取文本对应的span节点修改
const papercounttext = document.querySelector('#paper-count-text')

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