怎么多次追加Child(Element)。(相同的元素)

本教程将介绍如何多次追加Child(Element)。(相同的元素)的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么多次追加Child(Element)。(相同的元素) 教程 第1张

问题描述

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

为了让您更好地理解,我做了一个小提琴:

推荐答案

appendChild将在将节点附加到其新位置之前将其从所在位置删除,因此您需要复制该节点。为此,您可以使用cloneNodetrue使cloneNode执行深度克隆,即使用其所有子节点。

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

好了关于怎么多次追加Child(Element)。(相同的元素)的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。