I am currently working on a project to create a webpage where I can upload new images that will be displayed at the top left corner. The existing images on the page should then shift one space to the right, similar to how it happens on an Instagram profile page. I have managed to make this work using unshift() but there is a visible gap between the images due to the commas separating them. I want the images to be arranged next to each other seamlessly, forming a big rectangle made up of smaller squares. I've been struggling to write the code for this all day and haven't had any luck so far. Can anyone provide assistance? Your help would be greatly appreciated.
<HTML>
<body>
<body onload="myfunction()">
<div class="content" id="content"></div>
<script>
var x = ["<img src=image1.jpg>", "<img src=image2.jpg>", "<img src=image3.jpg>", "<img src=image4>"];
document.getElementById("content").innerHTML = x;
function myfunction() {
x.unshift("<img src=image5>", "<img src=image6>");
document.getElementById("content").innerHTML = x;
}
</script>
</body>
</HTML>