Установка innerHTML: почему он не обновляет DOM?

Question

Интересно, почему я не могу получить 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 остается неизменным.Почему это так?

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

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

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, я могу обновить свойство innerHTML, когда захочу:

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

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

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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