为什么给变量x赋值无法修改对应DOM元素的innerHTML？

原因解释 #

你遇到的问题本质是JavaScript基础类型的值传递特性导致的，和DOM操作的逻辑无关：

• 第一种写法里，innerHTML返回的是字符串，属于JavaScript的基础类型（原始值类型），当你执行let x = document.getElementById("post-title").innerHTML时，只是把DOM元素的innerHTML属性对应的字符串值复制了一份赋值给变量x，此时x和原DOM元素的innerHTML属性没有任何绑定关系。
• 后续你执行x = 'hi'，只是修改了变量x本身存储的字符串值，完全不会影响到原DOM元素的属性，自然也就不会更新页面内容。

第二种写法是直接对DOM元素的innerHTML属性赋值，相当于直接修改DOM对象的属性值，浏览器会监听到DOM属性的变化进而更新页面渲染，所以可以生效。

如果你想用变量简化写法，可以这么调整 #

你可以把DOM元素的引用存在变量里，再修改它的属性即可：

function hello(){
    let titleEl = document.getElementById("post-title")
    titleEl.innerHTML = 'hi'
}

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