web-dev-qa-db-ja.com

innerHTMLの設定：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>
_

ログでは、クリックすると変数が再度割り当てられることがわかりますが、my_divのinnerHTMLは変更されていません。どうしてこれなの？


数年の経験を経て...

（私がそうであったように）ちょうど始めたばかりで、同じことを自分自身に問いかけていることに気付いた場合、理解する必要がある2つの重要な概念があります。

  1. 参照による割り当て：私の間違いは、_var myDivValue = element.innerHTML_がinnerHTMLへの参照/アドレスを作成すると考え、その参照に新しい値を割り当てるたびに、コンテンツを更新するだけでしたが、それはそれがどのように機能するかではありません。
  2. 値による割り当て：代わりに、単に_element.innerHTML_値（空白）のコピーを作成し、その値をmyDivValueに割り当て、次に_myDivValue = "Hello";_で、私はmyDivValueに新しい値を割り当てていたため、_element.innerHTML_が更新されることはありません。

混乱する部分：JSで代入演算子（_=_）を使用する場合、参照または値（_var referenceName = reference_to_thing_と_var containerName = newValue_）のどちらを代入するかは明確ではありません。

多くの人が答えで言ったように、これを行う正しい方法は、document.getElementById("my_div")要素をmyDivに割り当てることです。

_var myDiv = document.getElementById("my_div")
_

そして、myDivと呼ばれる要素へのreferenceがあるので、好きなときにいつでもinnerHTMLプロパティを更新できます。

_myDiv.innerHTML = "Hello" // innerHTML is now "Hello"
myDiv.innerHTML = "Goodbye" // Changed it to "Goodbye"
_
javascriptinnerhtml
16
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";

中間変数は必要なく、使用できません。

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

innerHTMLの値を格納します。innerHTMLには、オブジェクトではなく文字列値が含まれます。したがって、elemを参照することはできません。プロパティを変更するには、オブジェクトを直接格納する必要があります。

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

innerHTML/outerHTMLを設定した後、要素を再割り当てする必要があります。

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

将来のグーグルにとって、私の問題は複数の要素を呼び出すことでした。

document.getElementsByClassName(‘class’).innerHTML

そのため、単一の要素ではなく配列を返しました。単数形に変更しました。

document.getElementByClassName(‘class’).innerHTML

これで、innerHTML値を更新できるようになりました。

0
Daniel Butler

あなたはinnerHTML値を次のように設定する必要があります

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