javascript - How to appendChild(element) many times. (The same element) - Stack Overflow

admin管理员组

文章数量:1287856

My question is: Is that possible to add the same element without rewriting the same variable. I am creating a slider, and i need to append a div with a class slide-el into block slider. Here is a part of code

    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 = [".jpg",
            ".jpg",
            ".jpg",
            ".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);
  }
}

The problem is that I can't append the same element that many times. It just creates one element instead of 4.

For you to understand better I made a fiddle:

/

My question is: Is that possible to add the same element without rewriting the same variable. I am creating a slider, and i need to append a div with a class slide-el into block slider. Here is a part of code

    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./static/images/pier_1080.jpg",
            "http://www.wallpapereast./static/images/pier_1080.jpg",
            "http://www.wallpapereast./static/images/pier_1080.jpg",
            "http://www.wallpapereast./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);
  }
}

The problem is that I can't append the same element that many times. It just creates one element instead of 4.

For you to understand better I made a fiddle:

https://jsfiddle/ud7dvn3z/

• javascript
• jquery
• element
• appendchild

Share Improve this question Follow asked Apr 14, 2016 at 22:53 GodjeGodje 44355 silver badges1616 bronze badges 1

• 1 to expand on @smerny's ment: the .cloneNode() method of a node will return a copy of the node rather than the node itself, allowing you to use the same base node multiple times. To copy the children of the node as well, you'll need to use slide.cloneNode(true) in order to perform a deep copy. – shamsup Commented Apr 14, 2016 at 22:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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 for that. The true makes cloneNode perform a deep clone, i.e. with all its child nodes.

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

Okey guys! I found an answer. I have to put

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

into for loop. Now it looks like this:

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

本文标签： javascriptHow to appendChild(element) many times (The same element)Stack Overflow