本文介绍了如何多次追加Child(Element)。(相同的元素)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的问题是:是否可以在不重写相同变量的情况下添加相同的元素。我正在创建一个滑块,我需要将一个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个。
为了让您更好地理解,我做了一个小提琴:
https://jsfiddle.net/ud7dvn3z/
推荐答案
appendChild
将在将节点附加到其新位置之前将其从所在位置删除,因此您需要复制该节点。为此,您可以使用cloneNode
。true
使cloneNode
执行深度克隆,即使用其所有子节点。
for(var i = 0; i < urls.length; i++){
sliderBody.appendChild(slide.cloneNode(true));
}
这篇关于如何多次追加Child(Element)。(相同的元素)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!