Функция Javascript для добавления div, содержащего изображение

#javascript #html #function

#javascript #HTML #функция

Вопрос:

Я пытаюсь создать функцию, которая создаст div, добавит изображение в div, а затем добавит div в тело, 3 раза используя цикл for . Я новичок в JS, и это ставит меня в тупик, может кто-нибудь сообщить мне, что я здесь делаю не так?

 function addImages(){
    for(var i=0; i<3; i  ){
       var imgDiv = document.createElement("div");
       imgDiv.id = "div" i;
       var image = document.createElement("img");
       image.setAttribute("src", "https://picsum.photos/100/150");
       imgDiv.appendChild(image); 
       document.getElementById('body').appendChild(imgDiv);
       }
   }

1. Есть ли у вашего тега body идентификатор body? вы всегда можете использовать: document.body

2. документ. querySelector(‘body’).appendChild(imgDiv);

3. @imvain2 спасибо, что указали на это, я изменил его на document.body , но все равно не повезло.

4. Я попробовал код с document . body и это действительно работает. Итак, вы действительно addImages куда-нибудь звоните? Вот как это работает jsfiddle.net/2no76rut

5. @imvain2 У меня была другая проблема в моем файле, препятствующая его запуску! Я только что попробовал ваш, и он отлично работает! Огромное вам спасибо.

Ответ №1:

Используйте этот код:

 function addImages(){
    for(var i=0; i<3; i  ){
       var imgDiv = document.createElement("div");
       imgDiv.id = "div" i;
       var image = document.createElement("img");
       image.setAttribute("src", "https://picsum.photos/100/150");
       imgDiv.appendChild(image); 
       document.getElementsByTagName('body')[0].appendChild(imgDiv);
       }
   }

getElementById ищет атрибут id элементов. body это имя тега, поэтому мы должны использовать getElementsByTagName вместо него. Это возвращает HTMLCollection, и мы получаем первый объект [0] .

Ответ №2:

Я сделал что-то похожее на ReactJS, которое, как я полагаю, будет хорошо переводиться с этим. Итак, я создал список с местоположениями изображений, а затем сопоставил их как таковые.

 const addImages = () => {
    let imageList = ["image1", "image2", "image3"]

    return imageList.map(image => <div><img src={image}/></div>)
}