Loading text into a <div> from file in assets theme in a html card

Using Ghost
1

I am using html cards that have content like this:

<figure class="kg-image-card kg-width-full">

<div class="bk-root" id="2d000dbe-c6ee-425f-904d-a6ae3478ca31" data-root-id="3569" width = "100%" style="aspect-ratio: 16 / 9"></div>
    
</figure>

Instead of pasting this:

"bk-root" id="2d000dbe-c6ee-425f-904d-a6ae3478ca31" data-root-id="3569" width = "100%" style="aspect-ratio: 16 / 9"

I have been trying this solution, where the whole div is saved in jp_consumer.txt

<figure class="kg-image-card kg-width-full">

<div id="myDiv"></div>

<script>
  // create a new XMLHttpRequest object
var xhr = new XMLHttpRequest();

// open the file using the GET method
   
xhr.open('GET', '{{asset "jp/jp_id/jp_consumer.txt"}}', true);

// set the response type to 'text'
xhr.responseType = 'text';

// when the file is loaded, insert its content into the div
xhr.onload = function() {
  if (xhr.status === 200) {
    document.getElementById('myDiv').innerHTML = xhr.responseText;
  }
};

// send the request
xhr.send();

</script>

</figure>

But I don’t really know how to do it, and it isn’t working. I’d be grateful if someone can help.

Thank you.