Javascript on page load without appending to body

215 Views Asked by At

I'm trying to show an image using a Jumi module in Joomla. Currently, the script is calling to append to the body tag but this places the image at the bottom of my template. I need to be able to run my script without appending to the body but can't just call the function since my script uses an if else statement to determine what to do. I'm very new to JS but is there a way to append to a paragraph tag or a div?

Link Here to Website

<script>
function show_image(src, width, height, alt) {
  var img = document.createElement("img");
    img.src = src;
    img.width = width;
    img.height = height;
    img.alt = alt;
    
    document.body.appendChild(img);
}
    var month = new Date().getMonth();
  var time = new Date().getHours();
  var day = new Date().getDay();

if (month > "3" && month < "10" && day == "6" && time > "19" && time <= "22") {
show_image("http://bizeebee.com/wp-content/uploads/2013/07/open-sign.jpg",500,450, "Powell is OPEN");
}
else { show_image("http://get.whotrades.com/u3/photoBB09/20171363290-0/blogpost.jpeg",500,450, "Powell is CLOSED");}
</script>

1

There are 1 best solutions below

0
Naveed On

Yes there is:

<div id='my-element'></div>

...

document.getElementById("my-element").appendChild(img);

This will append your img to the element whose id you provide.

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild