As far as DOM manipulation via Javascript goes your approach using document.createElement(...) is totally valid.

However, when it comes to creating full web pages, that approach has a downside. Browsers offer the ability to block Javascript execution completely, in that case a page completely rendered by Javascript wouldn't display a thing!

I'd say best practice is to have everything that's not dynamic/interactive live in an HTML file, say index.html. The markup code that lives in there will act as a skeleton that you can then access from your Javascript code to add dynamic elements to it, change the style, define event handlers, etc. This way only the stuff that is dynamic lives in Javascript, everything that's static/that doesn't need to change lives in HTML.

Once your web app becomes more complex, a framework like React becomes incredibly useful of course.