Javascript 设置innerHTML:Why won'；它不更新DOM吗？

想知道为什么在重新分配变量时无法获取

document.getElementById（“my_div”）.innerHTML

来更新DOM。例如：

<div id="my_div" onclick="clicky();">
    Bye.
</div>
<script type="text/javascript" charset="utf-8">
    function clicky() {
        var myDivValue = document.getElementById("my_div").innerHTML;
        myDivValue = "Hello";
        console.log(myDivValue);
    }
</script>

现在我对名为

myDiv

的元素有了引用，我可以随时更新

innerHTML

属性：

myDiv.innerHTML = "Hello" // innerHTML is now "Hello"
myDiv.innerHTML = "Goodbye" // Changed it to "Goodbye"

---

您应该将innerHTML值设置为

 var myDivValue = document.getElementById("my_div").innerHTML = "Hello";

---

innerHTML

计算结果为字符串。我不知道你为什么会有不同的期望。考虑这一点：

var a = 'foo'; // now a = 'foo'
var b = a; // now a = 'foo', b = 'foo'
b = 'bar'; // now a = 'foo', b = 'bar'

重新分配

b

不会改变

a

编辑以添加：如果上述内容不清楚，如果要更改

innerHTML

，您可以直接为其分配：

document.getElementById("my_div").innerHTML = "Hello";

您不需要，也不能使用中间变量

 var myDivValue = document.getElementById("my_div").innerHTML;

存储innerHTML的值，innerHTML包含字符串值，而不是对象。因此，不可能引用元素。必须直接存储对象才能修改其属性

var myDiVElem = document.getElementById("my_div");
myDiVElem.innerHTML = 'Hello'; // this makes the change

---

设置innerHTML/outerHTML后，需要重新分配元素：

let indexInParent=[].slice.call(elem.parentElement.children).indexOf(elem);
elem.innerHTML=innerHTML;
elem=elem.parentElement.children[indexInParent];

---

对于未来的谷歌用户来说，我的问题是我把复数叫做复数

document.getElementsByClassName（'class'）.innerHTML

所以它返回了一个数组，而不是一个元素。我把它改成单数

document.getElementByClassName（'class'）.innerHTML

---

这使得我可以更新innerHTML值

innerHTML

返回一个字符串，而不是对DOM的引用。顺便说一句，您不必手动查询元素-只需通过调用

this

参数将其引用传递给处理程序即可。对不起，我不明白

this

在这种情况下是如何工作的。我尝试了

console.log（document.this）

，但它只返回一个未定义的

。

然后
函数clicky（elem）{elem.innerHTML=…
啊，我想我明白了。不能给对象的属性分配变量，只能给对象分配变量。对吗？似乎这样可以：var myDivValue=document.getElementById（“my_div”）；myDivValue.innerHTML=“Hello”@nipponese:重新分配变量不会影响以前分配给它的任何内容。要写入
var myDiv=document.getElementById（“my_div”）；myDiv.innerHTML=…；
将在对象上设置
innerHTML
属性，而
myDiv
和
document.getElementById（“my_div”）
specify；但是，例如，
var myDiv=document.getElementById（“我的div”）；myDiv=document.getElementById（“其他div”）；
不会对
document.getElementById（“我的div”）产生任何影响
，它只需更改
myDiv
来指定不同的元素对象。@nipponese:只要想想
innerHTML
是字符串类型的属性：您可以获取或放置字符串。另一方面，
getElementById
返回一个引用，一个对象类型，就像您所想的。您可以在哪里设置myDivValue来返回包含“Bye”的字符串，然后将myDiVElem重新分配为等于“Hello”这个答案实际上与
innerHTML
没有任何关系。另外，没有函数
getElementByClassName
，因此这实际上没有帮助。请看……我指的是
文档。getElementsByClassName
我假设它是从元素调用的。我已经为它更新了我的答案。以防出现任何混淆有一个
document.getElementsByClassName
函数。
let indexInParent=[].slice.call(elem.parentElement.children).indexOf(elem);
elem.innerHTML=innerHTML;
elem=elem.parentElement.children[indexInParent];