JavaScript中能否让变量引用DOM元素的innerHTML以实现预期效果？

首先明确：没办法让变量直接持有innerHTML的引用，因为innerHTML是DOM元素的字符串类型属性，当你把它赋值给变量时，传递的是字符串的值副本，不是引用。JS里的原始类型（字符串、数字、布尔等）都是值传递，变量存的只是当前值的拷贝，修改变量不会影响原属性。

要实现修改DOM内容的预期效果，有两种简单的替代方式：

• 直接操作DOM元素的innerHTML：

  const myDiv = document.querySelector(".myDiv");
  myDiv.innerHTML += "Hello";
  

  这种方式直接修改元素的属性，会同步更新DOM内容。

• 封装成带存取器的对象，模拟“引用”效果：

  const myDiv = document.querySelector(".myDiv");
  const myDivContent = {
    get value() {
      return myDiv.innerHTML;
    },
    set value(newVal) {
      myDiv.innerHTML = newVal;
    }
  };
  
  // 使用时
  myDivContent.value += "Hello";
  

  这里通过对象的存取器属性，让myDivContent.value的读写直接关联到DOM元素的innerHTML，实现类似“引用”的操作体验。

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