Javascript 只有最后一个<；img>；属性得到输出，而其他属性没有'；T

我试图在屏幕上输出几个图像。我正在使用属性获取它们

包含图像源的代码：

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>';

我想要这样的输出： 但我得到的输出只是最后一张图像（红花）

---

如何显示所有图像？

请注意，根据文档，

innerHTML

会覆盖元素的内容：

innerHTML属性设置或返回元素的HTML内容（内部HTML）

因此，每次调用

innerHTML

时，代码都会更改

的内容 用

+=

替换

=

，就这样

您的代码：

var动物=”；
var食品=“”；
var-flower=''；
document.getElementById（“底部”）.innerHTML+=animal；
document.getElementById（“底部”）.innerHTML+=食物；
document.getElementById（“底部”）.innerHTML+=flower
分配是一种替代。附加内容将是
+=
，请你把代码的一部分写在你的意思上好吗？我试过（希望是你的意思），但它仍然没有将你的第二个和第三个作业改为
+=
。如果这不起作用，那么请对您的问题进行详细说明。它起作用了：D但现在每个图像都位于另一个图像的下方。当然，
元素默认为display:block谢谢：DD您和Taplar真的帮了大忙！
document.getElementById("bottom").innerHTML = animal;
document.getElementById("bottom").innerHTML = food;
document.getElementById("bottom").innerHTML = flower;