A couple possible problems off the top of my head:
1. CSS transitions won't work if you re-render a complete chunk of HTML instead of toggling a class.
2. <a>, <button>, <input>, etc. may lose focus or even data on re-render (e.g. while filling out a form).
3. Text selection may be reset on re-render.
4. If you don't use event delegation, event listeners may need to be reattached.
I agree that for raw display .innerHTML may be sufficient, but it's surely not in general. That would make React almost irrelevant, by the way, which would be a huge surprise.
And that's why reconciliation algorithms became so popular. You can't be serious when you say that losing input focus and text selection have never been relevant to you. Basically, dealing with the internal state of components down the tree becomes a nightmare.
https://codesandbox.io/s/zealous-vaughan-qd3gg?file=/src/ind...
I think this statement deserves some serious scrutiny. In many cases the performance hit may not be relevant or noticeable. I know this because I've been very productively using the following approach to build dynamic webapps for my personal use:
1. Compose HTML strings using Javascript, especially with string interpolation
2. Slap the resulting strings into div/span elements with innerHTML= statements.
This approach results in extremely clean and simple code - much cleaner than the OP's code in my view. I have never noticed any kind of performance issues, the updates are always instantaneous. I don't know what the author means by breaking functionality like text selection and focus, but it's never been relevant for me.
For an example of the coding style, see the reDispActiveTable in this code, which draws a table of TODO list items with some operations like edit/delete/mark complete. https://github.com/comperical/WebWidgets/blob/main/gallery/m...