如何多次使用appendChild(element)方法（同一个元素）？

Question

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

- Godje

---

扩展@smerny的评论：节点的.cloneNode()方法将返回节点的副本而不是节点本身，使您能够多次使用相同的基本节点。要同时复制节点的子元素，您需要使用slide.cloneNode(true)来执行深度复制。 - shamsup

Answer 1

appendChild 会将节点从原位置删除并添加到新位置，因此您需要复制该节点。您可以使用 cloneNode 来完成复制。通过将参数设置为 true，cloneNode 将执行深度克隆，即包括所有子节点。

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

- Paul

---

.cloneNode(true) 对我有用。 - mr.loop

Answer 2

好的，小伙子们！我找到了答案。我必须把它放在

标签中。

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

- Godje