Never set .innerHTML !
document.createElement is very tedious. But you can hide them inside pure functions that returns your component. You could for example put the confetti button example into a function and whenever you want a confetti buttton const button = confettiButton("hurray"); body.appendChild(button);
Or you could make a class and extend the Button into a confetti button.
You can then use innerText to change values. And use other DOM methods instead of redoing the innetHTML. When using function abstractions the DOM updates can be private, and you don't have to worry about innerHTML elsewhere overwriting your changes.
Basically React was invented to overcome spaghetti innerHTML, but you can solve the problem with vanilla JS too, just stop thinking about the DOM as HTML, think of it as a tree.
You can then use innerText to change values. And use other DOM methods instead of redoing the innetHTML. When using function abstractions the DOM updates can be private, and you don't have to worry about innerHTML elsewhere overwriting your changes.
Basically React was invented to overcome spaghetti innerHTML, but you can solve the problem with vanilla JS too, just stop thinking about the DOM as HTML, think of it as a tree.