Только последний <img>атрибут выводится, а остальные нет

Question

Я пытаюсь вывести пару изображений на экран. Я извлекаю их, используя атрибут.

Код, содержащий источники изображений:

var animal = '<div class = "gallery"><img src = "https://i.pinimg.com/474x/17/16/bd/1716bd0cc651bd9be7852e02dfc3d56c.jpg" loading = "lazy" alt = "animal"></div>';
var food = '<div class = "gallery"><img src = "https://i.pinimg.com/originals/44/f6/5e/44f65ecf8cd629fcf84c419efb40e3ef.png" loading = "lazy" alt = "food"></div>';
var flower = '<div class = "gallery"><img src = "https://lh3.googleusercontent.com/proxy/8sq7n7yfJ3TbY6-vaDEa9Ey-VyChfXdmLLo8Rf8VZUzz7e-ncgud_HjXgh589pTbA9fEJdFnGvhhavaC_Sh0Q6wF6lxKuNe4ZMUL5GYcvLmZmoRsqn2lQO5B97evBjezfzSIHg" loading = "lazy" alt = "flower"></div>';

Я также пытался без <div>, но он не работает.

И вот код, в котором я пытаюсь вывести их:

document.getElementById("bottom").innerHTML = animal;
document.getElementById("bottom").innerHTML = food;
document.getElementById("bottom").innerHTML = flower;

Я хочу вывод, подобный этому: Но вывод, который я получаю, является только последним изображением (красный цветок).

Как я могу показать все изображения?

Answer 1

Обратите внимание, что innerHTML перезаписывает содержимое элемента в соответствии с документацией:

Внутреннее свойство HTML устанавливает или возвращает HTML содержимое (внутреннее HTML) элемента.

Таким образом, ваш код меняет содержимое вашего <div> каждый раз, когда вы звоните innerHTML.

Заменить = += и все!

Ваш код:

var animal = '<div class = "gallery"><img src = "https://i.pinimg.com/474x/17/16/bd/1716bd0cc651bd9be7852e02dfc3d56c.jpg" loading = "lazy" alt = "animal"></div>';
var food = '<div class = "gallery"><img src = "https://i.pinimg.com/originals/44/f6/5e/44f65ecf8cd629fcf84c419efb40e3ef.png" loading = "lazy" alt = "food"></div>';
var flower = '<div class = "gallery"><img src = "https://lh3.googleusercontent.com/proxy/8sq7n7yfJ3TbY6-vaDEa9Ey-VyChfXdmLLo8Rf8VZUzz7e-ncgud_HjXgh589pTbA9fEJdFnGvhhavaC_Sh0Q6wF6lxKuNe4ZMUL5GYcvLmZmoRsqn2lQO5B97evBjezfzSIHg" loading = "lazy" alt = "flower"></div>';
document.getElementById("bottom").innerHTML += animal;
document.getElementById("bottom").innerHTML += food;
document.getElementById("bottom").innerHTML += flower;

<div id="bottom"></div>

Или:

var animal = '<div class = "gallery"><img src = "https://i.pinimg.com/474x/17/16/bd/1716bd0cc651bd9be7852e02dfc3d56c.jpg" loading = "lazy" alt = "animal"></div>';
var food = '<div class = "gallery"><img src = "https://i.pinimg.com/originals/44/f6/5e/44f65ecf8cd629fcf84c419efb40e3ef.png" loading = "lazy" alt = "food"></div>';
var flower = '<div class = "gallery"><img src = "https://lh3.googleusercontent.com/proxy/8sq7n7yfJ3TbY6-vaDEa9Ey-VyChfXdmLLo8Rf8VZUzz7e-ncgud_HjXgh589pTbA9fEJdFnGvhhavaC_Sh0Q6wF6lxKuNe4ZMUL5GYcvLmZmoRsqn2lQO5B97evBjezfzSIHg" loading = "lazy" alt = "flower"></div>';
document.getElementById("bottom").innerHTML = document.getElementById("bottom").innerHTML + animal;
document.getElementById("bottom").innerHTML = document.getElementById("bottom").innerHTML + food;
document.getElementById("bottom").innerHTML = document.getElementById("bottom").innerHTML + flower;

<div id="bottom"></div>