Ре-рендер элемента HTML на JS?

Question

[beDenz]

Здравствуйте!
Подскажите, как перерисовать отдельный html элемент, а не всю страницу. Например как это делает реакт, перерисовывая компоненты. Пробовал через display: none/block, не сработало. У меня содержимое элемента рендерится из объекта, и мне нужно его перерисовать, когда объект мутирует.

Answer 1

[Антон Неверов]

Полностью удаляете элемент и полностью пересоздаёте его структуру из JavaScript. Скрыть и показать тот же div - это не перерендерить его.

Comments

[beDenz]

Да, я так уже делаю и даже работает.

Answer 2

[Шохрух Шаймардонов]

Не получится, из-за архитектуры работы браузерных движков, можете почитать на хабре. А касательно react/vue, то там используется virtual DOM.

Answer 3

[Антон Швец]

"перерисовать" это что? Перерисовывать можно по разному, точечно вносить изменения например.
Содержимое элемента можно сменить полностью задав innerHTML.
Можно создавать ноды, удалять существующие и на их место вставлять созданные.
Можно, как это делают некоторые движки, создавать параллельную структуру, а потом пробегаться и искать изменения относительно реальной, и если они найдены менять реальную.

Comments

[beDenz]

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

[Антон Швец]

beDenz, для небольших частных случаев можно накостылить что-то в этом роде https://jsfiddle.net/melchiorio/1uo3Lk8d/
Можно попробовать помечать в плоском хтмл изменяемые места хмтл-комментарием, вычленять текстовую ноду и заменять ее.

Для средних проще взять react/vue.
Для большого SPA - ангуляр.

Answer 4

[xmoonlight]

includeHTML