如何多次appendChild(元素).(相同的元素)

Question

我的问题是:是否可以在不重写相同变量的情况下添加相同的元素.我正在创建一个滑块,我需要将div一个类附加slide-el到块中slider.这是代码的一部分

    var body, html, sliderBody, btnLeft, btnRight, i, parts, vHeight, vWidth;
//Variable definitions
var i = 0,
    parts = 3,

    //Main html elements
    body = document.body,
    html = document.element,

    //viewport Height and Width
    vHeight = window.innerHeight,
    vWidth = window.innerWidth,

    sliderBody = _id("slider"),
    btnLeft = _id("btn-left"),
    btnRight = _id("btn-right"),

    urls = ["http://www.wallpapereast.com/static/images/pier_1080.jpg",
            "http://www.wallpapereast.com/static/images/pier_1080.jpg",
            "http://www.wallpapereast.com/static/images/pier_1080.jpg",
            "http://www.wallpapereast.com/static/images/pier_1080.jpg"];

    slide = _createEl("div");
    slide.className += "slide-el";

function _id(el){
  return document.getElementById(""+ el +"");
}
function _createEl(el){
  return document.createElement(""+ el +"");
}
window.onload = function(){
  slideLayout();
}

function slideLayout(){
  for(var i=0; i < urls.length; i++){
    sliderBody.appendChild(slide);
  }
}

问题是我不能多次添加相同的元素.它只创建一个元素而不是4个元素.

为了让你更好地理解我做了一个小提琴:

https://jsfiddle.net/ud7dvn3z/

Answer 1

appendChild将节点从其中的任何位置删除,然后将其附加到新位置,因此您需要复制该节点.你可以使用cloneNode:

for(var i=0; i < urls.length; i++){
  sliderBody.appendChild(slide.cloneNode());
}