JavaScript DOM innerHTML修改指定ID的HTML元素内容未生效问题

你遇到的内容不更新的问题，完全和Opera、Chrome的浏览器兼容性无关，是对JavaScript的变量传递逻辑、DOM操作的基本写法理解错了。

具体错误拆解 #

• 你初始写的几行代码，比如var day1max = document.getElementById('todayMax').innerHTML，本质是把当时<h1 id="todayMax">元素的innerHTML属性对应的字符串值，拷贝一份存到叫day1max的普通JS变量里。
• 字符串属于JS的原始值类型，按值传递，这行执行完之后，day1max这个变量和原来的DOM元素就没有任何关联了。
• 后面你写day1max = today.max，只是把这个普通变量里存的旧字符串，替换成了today.max的数值，全程没有碰对应的DOM元素，页面内容自然不会有任何变化。
• 同样的错误还出现在day1min、day1current、day1title、day1desc这几个变量上，都是一开始就取了元素innerHTML的旧值存成独立变量，后续只修改变量值，没有直接操作DOM。

你代码里唯一能正常生效的部分 #

• 对图片的操作是对的：你写var day1img = document.getElementById('todayIcon')时，存的是DOM元素对象的内存引用，不是innerHTML的拷贝值。所以后续写day1img.setAttribute('src', today.icon)是真的拿到了img元素本身去修改src属性，图片内容其实是可以正常更新的，你可以自行验证。

代码里的隐藏bug #

• 你写的day1min = "today.min"这行，是把字面字符串"today.min"赋值给变量，就算后面修正了DOM操作逻辑，这行也会把页面上的最低温文字直接显示成today.min，而不是取对象里的真实数值。

修正后的正确代码示例 #

// 第一步先存DOM元素的引用，不要提前取innerHTML的旧值
const day1maxEl = document.getElementById('todayMax')
const day1minEl = document.getElementById('todayMin')
const day1currentEl = document.getElementById('todayCurrent')
const day1img = document.getElementById('todayIcon')
const day1titleEl = document.getElementById('todayTitle')
const day1descEl = document.getElementById('todayDesc')

// 第二步修改DOM内容时，直接给对应元素的文本属性赋值
day1maxEl.textContent = today.max
day1minEl.textContent = today.min
day1currentEl.textContent = today.current
day1img.setAttribute('src', today.icon)
day1titleEl.textContent = today.title
day1descEl.textContent = today.description

补充提示：对于纯文本类的页面内容，优先用textContent代替innerHTML，既可以避免不必要的HTML解析开销，也能降低潜在的内容注入风险。

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