Как appendChild (element) много раз. (Тот же самый элемент)

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()); 
} 

Answer 2

Okey ребята! Я нашел ответ. Я должен поставить

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

for петля. Теперь это выглядит следующим образом:

for(var i=0; i < urls.length; i++){ 
    slide = _createEl("div"); 
    slide.className += "slide-el"; 
    sliderBody.appendChild(slide); 
}