Настройка 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>

В журнале я вижу, что переменная перераспределяется при нажатии, но innerHTML my_div остается неизменным. Почему это?

После нескольких лет опыта...

Для тех, кто только начинает (как и я) и спрашивает об одном и том же, есть два важных понятия, которые необходимо понять:

Присвоить по ссылке: Моя ошибка заключалась в том, что я думал, что var myDivValue = element.innerHTML создаст ссылку/адрес для innerHTML, и каждый раз, когда я назначал новое значение этой ссылке, я мог просто обновлять контент, но не то, как он работает.
Назначить по значению: Вместо этого я просто делал копию значения 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, я могу обновлять свойство innerHTML всякий раз, когда мне нравится:

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

Ответ 1

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

Вам не нужно и не может использовать промежуточную переменную.

Ответ 2

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

хранит значение innerHTML, innerHTML содержит строковое значение, а не объект. Таким образом, ссылка на элем не возможна. Вы должны сохранить непосредственно объект, чтобы изменить его свойства.

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

Ответ 3

вы должны установить значение innerHTML как

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

Ответ 4

вам нужно переназначить элемент после установки innerHTML/outerHTML:

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

Ответ 5

Для будущих гуглов моя проблема заключалась в том, что я звонил во множественное число элементов.

document.getElementsByClassName(‘class).innerHTML

Таким образом, он вернул массив не один элемент. Я изменил это на единственное число.

document.getElementByClassName(‘class).innerHTML

Это позволило мне обновить значение innerHTML.