Javascript 我在一个div中有5个图像，如何移动单击图像的位置，使其成为div中的第一个图像？

基本上，当div内的图像被单击一次时，单击的图像的位置需要移动以成为div内的第一个图像，其余图像必须在一个点上移动。我不能用jQuery来处理这个问题

    <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>

我在javascript中尝试了以下内容：

    document.addEventListener('click', function() {
        for(var i = 0; i < document.images.length; i++) {
            //what code here?    

    }


    }, false);

document.addEventListener（'click'，function（）{
对于（var i=0；i

只需将单击的图像与父图像分离，然后在开始处重新插入即可。您还可以共享处理程序并使用关键字

this

来标识单击的图像

var img=document.querySelectorAll（“img”）；
对于（var i=0；i

---

将单击的图像附加到第一个位置

document.addEventListener（'click'，函数（e）{
e=e | | window.event；
var target=e.target | | e.src元素；
var container=document.getElementById（“容器”）；
container.insertBefore（目标，container.firstChild）；
}，假）；

只需使用

removeChild（）

删除单击的元素，并将其作为新元素插入即可。

var img_wrapper=document.getElementById（'img_wrapper'）；
var el=img_wrapper.getElementsByTagName（'img'）；
对于（变量i=0；i

---

将单击的图像移动到第一个位置的另一种方法

document.querySelectorAll（'img'）.forEach（函数（项）{
item.addEventListener（'单击'，函数（））{
var imgs=document.querySelectorAll（'img'）；
firstimg=imgs[0].src；
对于（变量i=1；i


 <div id="container">
     <img src="http://4.bp.blogspot.com/-M7FEplJcjOM/UE0-vV3HUcI/AAAAAAAAEBA/-nTyQ8spBJc/s1600/Number-One.png" width="100" height="100">
     <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/MetroDF_Linea_2.jpg" width="100" height="100">
     <img src="http://www.hotel-r.net/im/hotel/gb/number-three-20.png" width="100" height="100">
     <img src="http://1.bp.blogspot.com/-mFRbag9oIwM/URcr_79sUtI/AAAAAAAAIFA/ezJStcA1ZpM/s320/4.jpg" width="100" height="100">
 </div>

document.addEventListener('click', function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement; 
    var container  = document.getElementById("container");
    container.insertBefore(target, container.firstChild);
}, false);