Empty container then populate it with updated data elements

I am working on quite basic CRUD webapp. The difference is I want to better understand JavaScript, learn patterns, try to implement best practices. Thus I am not using any kind of frameworks or helper libraries at all, nowhere.

It's not a client or commercial project, more for myself to learn new things. The interface is generated on the fly from the code using appendChild, innerHTML, and all those standard features.

I now find that when data updates, it's easier to empty the whole container which represents its data and populate it with the new generated elements, rather than finding all the elements that should be changed by their IDs or anything and updating them. It makes me feel confident that I update everything, don't lose or duplicate event listeners and so on.

React seems to be doing something similar. Angular makes it differently.

The question is - is it a viable way at all? Or should I change each element granularly? What will happen if there are a lot of nested elements? Should I continue this path of wiping out then recreating?