Q:

I have 5 images inside a div, and how can i move the position of a clicked image so that it moves to become the very first image inside the div?

Basically, when an image inside the div is clicked once, the clicked image's position needs to move to become the very first image inside the div, and the rest of the images have to shuffle over one spot. I can't use jQuery for this.
    <div>
        <img src="images/yellow.jpg">
        <img src="images/blue.jpg">
        <img src="images/red.jpg">
        <img src="images/green.jpg">
        <img src="images/black.jpg">
    </div>

I tried the following in javascript:
    document.addEventListener('click', function() {
        for(var i = 0; i < document.images.length; i++) {
            //what code here?    

    }

    }, false);

A:

Simply remove the clicked element using removeChild() and insert the same as new element.

var img_wrapper = document.getElementById('img_wrapper');
var el = img_wrapper.getElementsByTagName('img');

for(var i = 0; i < el.length; i++) {
  el[i].addEventListener("click", shuffleImages);
}

function shuffleImages(e) {
  var selected_img = e.target;
  img_wrapper.removeChild(selected_img);
  img_wrapper.insertBefore(selected_img, img_wrapper.firstChild);
}
<div id="img_wrapper">
  <img src="http://via.placeholder.com/100x100&&text=1" />
  <img src="http://via.placeholder.com/100x100&&text=2" />
  <img src="http://via.placeholder.com/100x100&&text=3" />
  <img src="http://via.placeholder.com/100x100&&text=4" />
  <img src="http://via.placeholder.com/100x100&&text=5" />
</div>

