为何将innerHTML存入变量后无法修改页面内容？

嘿，我来帮你搞清楚为什么stored()函数没效果！

核心问题：你存的是字符串副本，不是DOM引用 #

当你执行var display = document.getElementById("display").innerHTML;时，你拿到的只是当前display元素内部HTML的字符串副本——这就像把黑板上的字抄到笔记本上，之后修改笔记本上的内容，黑板上的字根本不会变。

你给变量display赋值"Bonjour"，只是修改了这个独立的字符串变量，完全和页面上的DOM元素没有关联，自然看不到页面变化。

而notStored()函数直接操作document.getElementById("display").innerHTML，相当于直接在黑板上改字，所以能立刻看到效果。

修正方案：存储DOM元素本身 #

如果想通过变量来操作页面元素的内容，应该把DOM元素对象存到变量里，而不是它的innerHTML值。这样变量保存的是对元素的引用，修改它的属性就会直接作用到页面上：

function stored() {
  // 存储DOM元素本身，而非innerHTML字符串
  var displayElement = document.getElementById("display");
  displayElement.innerHTML = "Bonjour";
}
function notStored() {
  document.getElementById("display").innerHTML = "Hello";
}

小补充：JS的值类型 vs 引用类型 #

• 字符串属于值类型，赋值时会创建一个全新的副本，修改副本不影响原内容；
• DOM元素属于引用类型，赋值时传递的是对原对象的引用，修改引用的属性会直接改变原对象。

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