如何多次追加Child(元素）.(相同元素）

How to appendChild(element) many times. (The same element)

本文关键字：元素 何多次 追加 Child      更新时间：2023-09-26

我的问题是：可以添加相同的元素而不重写相同的变量吗。我正在创建一个滑块，并且我需要将具有类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个。

为了让你更好地理解，我做了一把小提琴：

https://jsfiddle.net/ud7dvn3z/

appendChild将在将节点附加到新位置之前将节点从其所在位置移除，因此您需要制作节点的副本。您可以使用cloneNode。true使cloneNode执行深度克隆，即使用其所有子节点。

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

大家好！我找到了答案。我必须放

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

进入CCD_ 8循环。现在看起来是这样的：

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