如何appendChild（元素）多次。（相同的元素）

我的問題是：是否可以在不重寫相同變量的情況下添加相同的元素。我正在創建一個滑塊，並且我需要將div和slide-el類別附加到塊slider中。這裏是代碼如何appendChild（元素）多次。（相同的元素）

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/

來源

2016-04-14 Godje

對@ smerny的評論擴大：在'.cloneNode（）'節點的方法將返回節點的副本，而不是節點本身，讓您在使用相同基節點多次。要複製節點的子節點，您需要使用'slide.cloneNode（true）'來執行深度複製。 – shamsup

appendChild將刪除不管它是將其附加到新的位置之前的節點，所以你需要做的節點的副本代替。您可以使用cloneNode爲：

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

來源

2016-04-14 22:56:10 Paulpro

歐凱傢伙！我找到了答案。我必須把

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

into for loop。現在看起來是這樣的：

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

來源

2016-04-14 22:55:47 Godje

如何appendChild（元素）多次。 （相同的元素）

回答

相關問題

如何appendChild（元素）多次。（相同的元素）