如何多次追加 Child(element)。 （相同的元素）

Question

我的问题是： 是否可以在不重写相同变量的情况下添加相同的元素。 我正在创建一个滑块，我需要将 div 和 class 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 个。

为了让你更好的理解我做了一个fiddle:

https://jsfiddle.net/ud7dvn3z/

Answer 1

好的伙计们！我找到了答案。我要放

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

Answer 2

appendChild will remove the node from wherever it is before appending it to its new location, so you need to make copies of the node instead. You can use cloneNode 为此。 true 使 cloneNode 执行深度克隆，即使用其所有子节点。

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