I'm working on a survey where I am adding images via Javascript (I cannot add the images manually because there are hundreds of images based on different conditions).

I have done the following where I have a block with two separate questions, one blank question with Javascript to display the image, and then below the text of the question.

However, when I preview the survey, the image always appears at the very bottom of the page, no matter how I reorder the blocks.

Here is the Javascript I've written to display the image:

Qualtrics.SurveyEngine.addOnload(function()
{

function display_image(src, width, height) {
  var a = document.createElement("img");
  a.src = src;
  a.width = width;
  a.height = height;
  document.body.appendChild(a);
}
    
display_image('URL GOES HERE', 
         770, 
         385);

});

Qualtrics.SurveyEngine.addOnReady(function()
{
    /*Place your JavaScript here to run when the page is fully displayed*/

});

Qualtrics.SurveyEngine.addOnUnload(function()
{
    /*Place your JavaScript here to run when the page is unloaded*/

});

Any ideas? I'm quite stuck.