Where is the best place to store html for dynamic use in js?

Question

JavaScript

I am writing my module for Bitrix. The module should automatically add the widget to all pages of the site. The widget will have dynamic content, and the html of the widget itself also needs to be stored somewhere. At the same time, you can add a widget to the page only using js.
The question is which approach is better to choose.
You can:
1) Add a script tag with the type= text/html attribute to the header, and take the template from there
2) Add template or code tags with display=none to the body of the document and take the template from there
3) Push the template into a separate file and load it with Ajax from there
4) Template string `string of text ${expression} string of text` is not an option, because not supported by IE.
5) All html will be inside normal js string.
It is the latter approach that I now use. Looks like this:

const TEMPLATE = '<div class="' + wrapClasses.join(' ') + '">'
        // кнопка вызова формы
        + '<div class="' + buttonClass + '">'
            + 'кнопка'
        + '</div>'

        // шапка виджета
        + '<div class="' + headerClass + '">'
            + '<div class="' + goAdminClass + '"> открыть в админке </div>'
            + '<div class="' + hideClass + '">_</div>'
        + '</div>'
// и т.д.

But in the end, such a template turned out to be quite large and constantly reworked, and I wondered if there was a better approach? What is the most common way to organize this and will be clear to any normal developer (after me, other developers will inherit this project, I would not want to leave shit to future generations))
PS Libraries like react, etc. it's not an option here.

Answer 1

You can save it in local storage, and then pull it from there if necessary. There will be traffic savings, and the download speed will be higher.

Answer 2

Why is React not an option? It's always an option :)
Simpler - mustache.js