Where and how is it better to store html blocks for unloading them via AJAX?

Question

AJAX

Good afternoon!

I am thinking about the details of the page for sending commands to the server, which will consist of several scenarios:
1) The first form for entering data
2) The second form for entering data
3) The block of the spinner (during processing)
4) The block with the result of the response from the server While

processing the input data, sending them and waiting for a response, the blocks should switch between themselves (after submitting the form, we will replace the content with a spinner, and then we will display the response from the server).

This is my first time doing this, the initial way to change content is to hide/show blocks via their css properties (hidden).
Of course it will work, but it's clearly not the right way.
Each block (30-40 lines of html code) should be placed in separate html files, and after uploading data from them, I think it's not so hot.

Question: how can you competently implement the storage of many blocks with content and their subsequent call?
Is it possible to place them in one file and call them by a specific tag?

Answer 1

Store templates in a script tag, with type "text/html" or "text/template":

<script type="text/html" id="foobar-tpl">
<div>some content</div>
</script>
<script>
var tpl = document.getElementById('foobar-tpl').innerHTML;
console.log(tpl); // <div>some content</div>
</script>

On top of this, you can screw a JS template engine, such as EJS or mustache.js, and get a real template with dynamic content. Here is the simplest example of such a template with dynamics (without libraries): https://repl.it/repls/NuttyMindlessDivisor
In general, in modern realities, React, Vue and other libraries are used for such dynamics.