change layout without redirecting to another html document

Question

I have 1 HTML page and i want to be able to manipulate the shape of the layout and the content without having to create a second page and without having to refresh the page;

I had the idea to code everything into the one page, and toggle the display of each element on and off when needed using javascript.

I also heared i could use AJAX and JSON, but json is only for storing data, and the idea of storing HTML elements into json files seemed silly to me , is it not ?

Is there a better approach to this?

Thank you and forgive my noob-ness.

Answer 1

Based on your decription, I would recommend React (to achieve higher SEO: Nextjs). Try to gg some source or video about it. Here is one of my fav: Build a React memory app
Landing Page using Nextjs

FYI: Ajax is a asynchronously method for your website communicate with server. And you can think JSON of a lightweight data, that you can receive(GET), send(POST),.. from/to server.