使用innerHTML方法的JavaScript代码修改h2文本为何不生效？

你写的选择和赋值代码本身语法没有问题，无法生效基本是以下几类问题：

• JS执行时机早于DOM渲染
  这是最高发的原因。如果你的JS代码写在<h2>标签之前（比如放在head里的script标签中），浏览器运行到这行JS的时候，还没解析到后面的h2元素，document.getElementById("tries")会返回null，调用null的innerHTML属性会直接抛出错误，代码自然不会生效。
  两种可直接用的修复方案：
  1. 把script标签移动到</body>闭合标签之前，保证所有DOM元素都解析完成后再运行JS
  2. 把DOM操作代码包裹在DOM加载完成的回调里执行：

  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById("tries").innerHTML = 'new text';
  })
  

• 页面存在重复ID
  getElementById只会返回页面中第一个匹配对应id的元素，如果页面里有其他更早加载的元素也写了id="tries"，你的修改会作用在那个元素上，如果那个元素是隐藏的或者不在可视区域，就会产生代码没生效的错觉。
• 修改被后续代码覆盖
  如果你改完文本之后，页面里还有其他逻辑（比如计数更新逻辑、前端框架重渲染逻辑）重新给这个h2赋值，你设置的文本会被直接覆盖。可以打开浏览器开发者工具的元素面板，给这个h2加DOM修改断点，直接追踪是哪段代码改动了它的内容。
• ID拼写不匹配
  id属性是大小写敏感的，检查h2标签上的id是不是和代码里写的完全一致，有没有多余空格、大小写错误，比如把tries写成Tries、tries （末尾带空格）都会导致匹配不到元素。

快速排查技巧：打开浏览器控制台，直接运行document.getElementById("tries")，如果返回null就是元素匹配失败；如果返回了目标h2元素但文本没有按预期变化，就是存在后续代码覆盖了你的修改。

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