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.

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.

• javascript
• html

7 Answers 7

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.

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>

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>

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

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

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>

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>

1. You can declare your variables outside of the loop and reuse them. This is more efficient.
2. 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.
3. You can also use template string so you don't need all the back slashes.
4. 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>