I have a JavaScript file that appends elements to the body according to the user interaction.

Right now in my index.html template I'm declaring global variables with the translated text:

 {% block main %}
      <script>
           let TRANSLATION = {% trans "my text" %}
      </script>
 {% endblock %}

So after Django translates the text in my index template, my JavaScript file can take the translated text and append it using something like:

element.innerHTML = TRANSLATION;

I know this is a very dirty way of translating the text that JavaScript will use because some users won't need that text and in those cases I'll be wasting resources with variables that I won't be using.

So the question is: What is the clean and correct way to translate text for external JavaScript files?