Wie Sie Child (Element) mehrmals anhängen. (Das gleiche Element)

Question

Meine Frage ist: Ist es möglich, das gleiche Element ohne Neuschreiben der gleichen Variable hinzuzufügen. Ich erstelle einen Schieberegler, und ich muss eine div mit einer Klasse slide-el in Block slider anhängen. ist hier ein Teil des Codes

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

Das Problem ist, dass ich nicht das gleiche Element, dass viele Male anhängen. Es schafft nur ein Element anstelle von 4.

Für Sie besser zu verstehen, habe ich eine Geige:

https://jsfiddle.net/ud7dvn3z/

Answer 1

appendChild wird den Knoten aus zu entfernen, wo immer es ist, bevor es an die neue Position angehängt, so müssen Sie Kopien des Knotens anstatt zu machen. Sie können cloneNode dafür verwenden:

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

Answer 2

Okey guys! Ich habe eine Antwort gefunden. Ich muss setzen

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

in for Schleife. Jetzt sieht es wie folgt aus:

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