Javascript 如何将图像插入到div中？

我目前有一个来自html文件的div，它也有来自css文件的样式。当我尝试将.js文件中的.jpg图片附加到div时，它没有使用已经定义的样式。我是不是把图片加错了？我不太明白为什么它没有使用定义的样式

var img=newimage（）；
img[0]=新图像（）；
img[0].src='1.jpg'；
img[1]=新图像（）；
img[1].src='2.jpg'；
document.getElementById（'picture'）.append（img[0]）
#图片{
高度：100px；
宽度：10px；
边框：1px纯黑；
}
首先，快速修复：使用数组
[]


var img=[]；
img[0]=新图像（）；
img[0].src='1https://placehold.it/60x60/0bf';
img[1]=新图像（）；
img[1].src='1https://placehold.it/60x60/fob';
document.getElementById（'picture'）.append（img[0]，img[1]）
#图片{
高度：100px；
宽度：10px；
边框：1px纯黑；
}
追加-也许您使用jquery

默认情况下，您可以尝试“appendChild”


函数foo（）
{
var img=新阵列（2）；
img[0]=新图像（）；
img[0].src=“1.jpg”；
document.getElementById（'picture'）.appendChild（img[0]）；
}

如果使用Jquery

<script>
funcntion foo()
{
  $("#picture").append("<img src='1.jpg'>");
}
</script>


函数foo（）
{
$（“#图片”）。附加（“”）；
}
您添加了“宽度：10px”，这就是为什么图像未设置在框上。
看这个，也许你的问题已经解决了


var img=[]；
img[0]=新图像（）；
img[0].src='1https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXWXMJA3FDB8MHWAG90BY1WYWDLFHX8FGVUFDB8FHW%3D&auto=format&fit=crop&w=1350&q=80'；
img[1]=新图像（）；
img[1].src='1https://images.unsplash.com/photo-1495465798138-718f86d1a4bc?ixlib=rb-1.2.1&ixid=MXWXMJA3FDB8MHWAG90BY1WYWDLFHX8FGVUFDB8FHW%3D&auto=format&fit=crop&w=1350&q=80'；
document.getElementById（'picture'）.append（img[0]，img[1]）
#图片{
高度：自动；
宽度：100px；
边框：1px纯黑；
}
#图像img{
宽度：100%；
高度：自动；
显示：表格；
}

为什么要使用
[0]
？。。为什么
var img=newimage（）就像Arayi只是编辑代码，但我的目标是有一个图像数组，我可以添加一个事件侦听器来循环图像。还有，你的CSS用于<代码> IMG标签？考虑使用语义HTML，而不仅仅是一个DIVI尝试，并且当附加图像继承任何CSS时的实际图像。我定义的样式。它将图片添加到我拥有的实际图片div之上。@Terry，但是您没有在CSS中为
img
标记定义任何样式。仅适用于父级
#picture
DIV元素。另外，请注意（如果这是问题的话），每个页面的ID必须是唯一的。@Terry您想创建幻灯片吗？我的目标是最终创建一个幻灯片。在添加更多特性/功能之前，我首先尝试正确地确保图像被追加。
<script>
funcntion foo()
{
  $("#picture").append("<img src='1.jpg'>");
}
</script>