Create multiple div using data from array using for loop

Question

I want to assign array elements to multiple divs which also have image tag in them using for loop. Array consists of image paths.

var img_list = ["one.png", "two.png", "three.png", "four.png"];

By using above array I have to create below HTML Structure. All divs should be inside "outer" div with a data-slide attribute which is without ".png".

<div id="outer">
  <div class="slide" data-slide="one"><img src="Images/one.png" /></div>
  <div class="slide" data-slide="two"><img src="Images/two.png" /></div>
  <div class="slide" data-slide="three"><img src="Images/three.png" /></div>
  <div class="slide" data-slide="four"><img src="Images/four.png" /></div>
</div>

This is what I wrote:

for (var i=0; i < img_list.length; i++){
    var container = document.getElementById("outer").innerHTML;
    var new_card = "<div class=\"slide\" data-slide=\'" + img_list[i] + "\'><img src=\'Images/" + img_list[i] + "\' /></div>";
    document.getElementById("outer").innerHTML = new_card;
}

But it is only showing the last image. Please help.

Icehorn · Accepted Answer · 2019-02-08 05:20:23Z

6

Each time your for loop runs, it is replacing the html element within the "outer" div with the current img html.

In order to have it append you can simply change document.getElementById("outer").innerHTML = new_card; to document.getElementById("outer").innerHTML += new_card; so that the element is appended rather than overwritten.

answered Feb 8, 2019 at 5:20

Icehorn

1,3678 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

guest271314 · Accepted Answer · 2019-02-08 05:39:37Z

The code at the question overwrites the .innerHTML within the for loop by setting .innerHTML to new_card at every iteration of the array. You can substitute .insertAdjacentHTML() for setting .innerHTML. Also, substitute const for var to prevent new_card from being defined globally. Include alt attribute at <img> element. You can .split() img_list[0] at dot character ., .shift() the resulting array to get word before . in the string img_list[i] to set data-* attribute value.

const img_list = ["one.png", "two.png", "three.png", "four.png"];

for (let i = 0, container = document.getElementById("outer"); i < img_list.length; i++) {
  const src = img_list[i];
  const data = src.split(".").shift();
  const new_card = `<div class="slide" data-slide="${data}"><img src="Images/${src}" alt="${data}"/></div>`;
  container.insertAdjacentHTML("beforeend", new_card);
}

<div id="outer"></div>

Maheer Ali · Accepted Answer · 2019-02-08 05:26:12Z

2

You are changing the innerHTML you need to add to it. And use Template literals for creating html strings

var img_list = ["one.png", "two.png", "three.png", "four.png"];
const outer = document.getElementById('outer')
img_list.forEach(img => {
  outer.innerHTML += `<div class="slider" data-slide="${img.split('.')[0]}"><img src="Images/${img}" /></div>` 
})
console.log(outer.innerHTML)

<div id="outer">
</div>

answered Feb 8, 2019 at 5:26

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Comments

Abhishek Raj · Accepted Answer · 2019-02-08 05:21:38Z

0

@Tony7931, please replace the last line of for loop with below code:

document.getElementById("outer").innerHTML += new_card;

answered Feb 8, 2019 at 5:21

Abhishek Raj

4904 silver badges15 bronze badges

Comments

Vasu Kuncham · Accepted Answer · 2019-02-08 05:57:44Z

0

You are almost there but, every time you are overriding the slider div.

You just have to add + at assignments section. like below.

document.getElementById("outer").innerHTML += new_card;

Here is the full example:

var img_list = ["one.png", "two.png", "three.png", "four.png"];

for (var i=0; i < img_list.length; i++){
    var container = document.getElementById("outer").innerHTML;
    var new_card = "<div class=\"slide\" data-slide=\'" + img_list[i].split('.')[0] + "\'><img src=\'Images/" + img_list[i] + "\' /></div>";
    document.getElementById("outer").innerHTML += new_card;
}

<div id="outer"></div>

answered Feb 8, 2019 at 5:57

Vasu Kuncham

5483 silver badges14 bronze badges

Comments

Narendra Jadhav · Accepted Answer · 2019-02-08 06:33:44Z

0

You could also use map method of array and Element.innerHTML to get the required result.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Demo

const img_list = ["one.png", "two.png", "three.png", "four.png"];

let result = img_list.map((v, i) => `<div class="slide" data-slide="${v.split(".")[0]}"><img src="Images/${v}"/>${i+1}</div>`).join('');

document.getElementById('outer').innerHTML = result;

<div id="outer"></div>

edited Feb 8, 2019 at 6:33

answered Feb 8, 2019 at 6:16

Narendra Jadhav

10.3k15 gold badges35 silver badges45 bronze badges

Comments

Rik · Accepted Answer · 2019-02-08 06:47:47Z

You can declare your variables outside of the loop and reuse them. This is more efficient.
const and let are preferable to var. You only need to set container once so it can be const. new_card should be let since you need to assign it more than once.
You can also use template string so you don't need all the back slashes.
using forEach will make the code cleaner:

const img_list = ["one.png", "two.png", "three.png", "four.png"];
const container = document.getElementById("outer")
let new_card;
img_list.forEach(i => {
    new_card = `<div class=slide data-slide='${i.split(".")[0]}'><img src='Images/${i}'></div>`
    container.innerHTML += new_card;
})

    <div id="outer">
    </div>

Alternately, using reduce:

const img_list = ["one.png", "two.png", "three.png", "four.png"];
const container = document.getElementById("outer")
const reducer = (a, i) => a + `<div class=slide data-slide='${i.split(".")[0]}'><img src='Images/${i}'></div>`
container.innerHTML = img_list.reduce(reducer, '')

    <div id="outer">
    </div>

Collectives™ on Stack Overflow

Create multiple div using data from array using for loop

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related