JavaScript初学者疑问：为何直接修改span.innerText生效，而赋值给let变量后修改变量无法改变元素内容？

嘿，这个问题刚好戳中了JavaScript里值类型和引用类型的核心区别，我来给你讲明白～

先看你能正常工作的代码：

let span = document.querySelector('span'); 
span.innerText = 20;

这里的span是对DOM元素对象的引用——你相当于拿着这个DOM元素的“地址”，当你给span.innerText赋值时，直接修改了这个地址指向的DOM对象的属性，所以页面上的span元素会立刻更新内容。

再看失效的代码：

let span = document.querySelector('span'); 
let element = span.innerText; 
element = 20;

问题出在let element = span.innerText这一步：span.innerText返回的是一个字符串值（属于JavaScript里的「值类型」），当你把它赋值给element变量时，其实是把这个字符串的副本存到了element里，它和原DOM元素的innerText属性已经完全是两个独立的东西了。

之后你给element赋值20，只是修改了这个变量里的副本，根本没碰原DOM元素的innerText属性，页面自然不会有任何变化。

举个更简单的类比帮你理解：

let person = { name: "Alice" };
let name = person.name; // 把"Alice"的副本存到name变量里
name = "Bob"; // 修改的是name变量里的副本
console.log(person.name); // 输出还是"Alice"，原对象的name属性没动

这和你的DOM操作问题逻辑完全一致——值类型的赋值是复制，不是引用。

总结一下：要更新DOM元素的内容，必须直接对DOM对象的innerText属性做赋值操作，不能绕个弯把值存到变量再改变量，因为那改的只是个无关的副本而已。

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