how to add img to div dynamically

Question

there is an array with data

let mapImages = [
        {way: 'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/1.jfif',
                         description: 'picher  1'},
        {way: 'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/2.jfif',
                    description: 'picher 2'},......]

there are several divS

<div class="mini">   </div>


        <div id="myModal" class="modal">
            <div class="modal-content">
              <span class="close">&times;</span>
                   <img id ="pop" src ="" alt = ""  width="500" height="500" style="border: 2px solid red">
                    </div>
            </div>

i want my array pictures to be added to mini class div

function showImages() {
            document.body.innerHTML = "";
            for(let i = 0; i < mapImages.length; i++){
                document.body.innerHTML +=  ` <img src="${mapImages[i].way}" alt = "${mapImages[i].description}"  width="200" height="200" style="border: 2px solid red"> `;
            }
        }

        showImages();

the problem is that pictures delete everything else on the page, and are not added to the desired div (mini class).

Without use jquery or other frameworks

You're clearing and adding those images to `document.body`, not to div. — Ivar, Jan 17 '21 at 11:31
It is happening because you are adding your picture to `document.body`. Just add your picture to `document.querySelector('.mini')`. — Hassan Imam, Jan 17 '21 at 11:31
Does this answer your question? [How to get element by class name?](https://stackoverflow.com/questions/17965956/how-to-get-element-by-class-name) — Ivar, Jan 17 '21 at 11:32
Does this answer your question? [How to add an image inside a dynamically created div?](https://stackoverflow.com/questions/19222395/how-to-add-an-image-inside-a-dynamically-created-div) — GBra 4.669, Jan 17 '21 at 11:39

Mamun · Accepted Answer · 2021-01-17T11:40:14.880

You are clearing the content of the body inside the function, so remove that. Also, you should update the content of the element with class mini instead of body:

let mapImages = [
  {way:'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/1.jfif',description: 'picher  1'},
  {way:'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/2.jfif',description: 'picher 2'}
];

var miniClass = document.querySelector('.mini');
function showImages() {
  for(let i = 0; i < mapImages.length; i++){
    miniClass.innerHTML +=  ` <img src="${mapImages[i].way}" alt = "${mapImages[i].description}"  width="200" height="200" style="border: 2px solid red"> `;
  }
}

showImages();

<div class="mini"></div>


<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <img id ="pop" src ="" alt = ""  width="500" height="500" style="border: 2px solid red">
  </div>
</div>

kiranvj · Answer 2 · 2021-01-17T11:40:54.010

Try this (get the div using getElementsByClassName and add/append all your image tags)

function showImages() {
   let imgContainer = document.getElementsByClassName('mini')[0];

            for(let i = 0; i < mapImages.length; i++) {
               imgContainer.innerHTML +=  ` <img src="${mapImages[i].way}" alt = "${mapImages[i].description}"  width="200" height="200" style="border: 2px solid red"> `;
            }
}

score 1 · Answer 3 · answered Jan 17 '21 at 11:41

1

use id not class

<div id="mini">   </div>

and get it

document.getElementById('mini').innerHTML += ....

answered Jan 17 '21 at 11:41

Mario Abbruscato

819
1
7
9

how to add img to div dynamically

3 Answers3