如何动态将img添加到div

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

Answer 1

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>

Answer 2

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"> `;
            }
}

Answer 3

use id not class

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

and get it

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