Почему ссылка на html узел не работает?

Question

[kar1m]

Проблема следующая, создаю html узел с помощью document.createElement и присваиваю переменной. После в коде с помощью этой переменной изменяю html зачастую это работает, а иногда не срабатывает. Вроде бы в переменной есть значение, если добавить к примеру класс, в переменной он появляется в classList, а в html ничего не происходит. Получается ссылка есть на узел, но уже не актуальная. Почему так происходит?
Взаимодействия с dom происходит таким образом https://codesandbox.io/s/suspicious-tesla-2rl4h?fi..., данный код является рабочим, но в рамках программы может перестать себя корректно вести, то есть манипуляции с помощью this.$root в котором хранится узел, не дают никаких результатов.

Comments

[Ярослав Дмитриев]

Нужен код

[v3shin]

Все просто: надо лишь исправить часть кода - и все заработает. =)

[kar1m]

Aleksandr Kritskii,

const button = document.createElement('button');
button.className = '.btn'
document.getElementById('root').appendChild(button);
...
//two hours later
button.classList.add('active');//я правильно понял, что этот код не должен работать по твоей схеме
//и мне каждый раз когда я хочу манипулировать этот элемент нужно достучаться до него по селектору?

[kar1m]

Aleksandr Kritskii, ок, спасибо. есть, что почитать по этому поводу? просто у меня куча мест в коде, где я храню в свойстве класса узел и все норм отрабатывает.

[kar1m]

Aleksandr Kritskii, https://codesandbox.io/s/suspicious-tesla-2rl4h?fi... - это рабочий код, который в процессе работы может стать не рабочим). как вы можете увидеть я не стучусь до элементу постоянно по селектору, а храню его в this.$root.

[kar1m]

Ярослав Дмитриев, добавил код)

[kar1m]

Aleksandr-JS-Developer, Ну а почему ссылка может перестать изменять dom? Может это поможет, при дебаге страница затемняется и если навести на рабочую ссылку то затемнение уходит и подсвечивается элемент на который переменная ссылается, а если ссылка не рабочая то просто затемнение уходит и все)

[Aleksandr Kritskii]

Aleksandr-JS-Developer, благодарю
считал, что это по-другому работает, но теперь разобрался

https://jsfiddle.net/a935nL6g/2/

[kar1m]

Aleksandr-JS-Developer, спасибо, разобрался. Очищал html, а массив с переменными забыл очистить). Просто раньше тоже сталкивался с такой ситуацией, и тогда обошелся костылем. Поэтому мне казалось, что есть какие-то нюансы манипуляции dom о которых мне неизвестно.