JS获取页面节点，并将其放入新的节点内的问题

Question

题目需求是这样的：页面上有一组图片，我点击其中一张图片，在另一个元素内生成这些图片，但是新生成的这组图片虽然内容一样，但是其顺序却发生了变化--例如：我选中了第二张图片，那么新生成的这组图片应该以第二张图片开始，依次排序，直到最后一张图片的时候，再接上前面的第一种图片。不知道我的意思大神们明白没有，代码如下：

var list=document.getElementsByClassName("list_item");//获得原图片组
var run_are=document.getElementsByClassName("run_are")[0];//这是目标元素
for (var i=0,len=list.length;i<len;i++) {
                (function(i){
                    list[i].onclick=function(){
                        var Arr=[];//创建新图片组
                        for(var z=0;z<len;z++){
                            if(z>=i&&z<len-1){//压入后半部分
                                Arr.push(list[z-i]);
                            }else if(z<i){
                                Arr.push(list[z+i]);//压入前半部分
                            }
                        }
                        paint(Arr);
                    }
                })(i);
            }
function paint(){
                for (var i=0,len=Arr.length;i<len;i++ ) {
                    run_are.innerHTML=Arr[i];//放入目标元素
                }
            }

问题来了：打开页面元素run_are，就一串字符串：[object HTMLLIElement]。也不报错，输出Arr：
就一串这些。这是为什么呢？那么要如何能够实现生产页面元素内部子节点呢？难道需要获取Arr[i]内的字符串来拼接成节点？

Answer 1

改为run_are.appendChild(Arr[i].clone());
但是这样的话，绑定的事件也会被一起移入，所以还是推荐用事件委托去绑定事件

Answer 2

打印出的那个数组是一个类数组的对象，run_are.innerHTML应该为Arr[i].innerHTML吧