设置innerHTML：为什么不更新DOM？

想知道为什么当我重新分配变量时，我无法获得document.getElementById("my_div").innerHTML来更新DOM。例如：设置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>

在日志中我可以看到变量里，当我点击重新分配，但my_div的innerHTML保持不变。为什么是这样？

来源

2011-11-19 nipponese

'innerHTML'返回一个字符串，而不是对DOM的引用。 –

顺便说一句，你不必手动查询元素 - 只需通过调用'this'参数来传递它的引用就可以了。 –

对不起，我不明白'this'在这种情况下是如何工作的。我试过\t \t'console.log（document.this）'，但它只返回一个'Undefined.' – nipponese

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";

你并不需要，并能” t使用，一个中间变量。

来源

2011-11-19 18:33:14 ruakh

啊，我想我明白了。不能将变量分配给对象的属性，只能分配对象。那是对的吗？看起来像这样工作： var myDivValue = document.getElementById（“my_div”）; myDivValue.innerHTML =“Hello”; – nipponese

@nipponese：重新分配一个变量不会影响以前分配的任何内容。要写'var myDiv = document.getElementById（“my_div”）; myDiv.innerHTML = ...;将在'myDiv'和'document.getElementById（“my_div”）'指定的对象上设置innerHTML属性;但是，例如'var myDiv = document.getElementById（“my_div”）; myDiv = document.getElementById（“other_div”）;'对document.getElementById（“my_div”）'没有任何影响，它只是改变'myDiv'来指定一个不同的元素对象。 – ruakh

我明白了...我想我不合逻辑地问了我的问题。我只是重新分配变量，而不是追加一个属性。感谢你的解释。 – nipponese

您应该设置innerHTML值一样

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

来源

2011-11-19 18:31:34 david

你在哪里设置myDivValue返回一个字符串包含“再见”，然后重新分配myDiVElem等于“你好” – david

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

存储innerHTML的值，innerHTML包含一个字符串值，而不是一个对象。所以没有提及elem是可能的。您必须直接存储对象以修改其属性。

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

来源

2011-11-19 18:36:37

这仍然不适用于我 – SuperUberDuper

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

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

来源

2016-08-26 03:58:51 kofifus

设置innerHTML：为什么不更新DOM？

回答

相关问题