仅使用javascript将多个图像附加到div

仅使用javascript将多个图像附加到div,javascript,html,css,Javascript,Html,Css,我创建了一个小脚本来计算上传/插入到html源代码中的图像。插入图像后,脚本为这些图像创建div容器。若我给出了三个图像,那个么脚本将创建三个具有类名的div,等等。我有一个具有该类名的css规则。这是在容器中有任何图像之前创建的。一切正常,但我就是无法将这些新图像附加到新创建的div中。有没有办法只使用JavaScript 下面是一个代码: if (document.getElementsByClassName("Multimedia")[0].getElementsByTagName("IM

我创建了一个小脚本来计算上传/插入到html源代码中的图像。插入图像后,脚本为这些图像创建div容器。若我给出了三个图像,那个么脚本将创建三个具有类名的div,等等。我有一个具有该类名的css规则。这是在容器中有任何图像之前创建的。一切正常,但我就是无法将这些新图像附加到新创建的div中。有没有办法只使用JavaScript

下面是一个代码:

if (document.getElementsByClassName("Multimedia")[0].getElementsByTagName("IMG")) {
    total_number_of_images = document.getElementsByClassName("Multimedia")[0].getElementsByTagName("IMG").length;
    for (i = 0; i < total_number_of_images; i = i + 1) {
        document.getElementsByTagName("IMG")[i].className = "Image_clip";
        child = document.getElementsByTagName("IMG")[i];
        image_container = document.createElement("DIV");
        image_container.className = "Image_container_div";
        document.getElementsByClassName("Multimedia")[0].appendChild(image_container);
        document.getElementsByTagName("IMG")[i].style.opacity = "0.8";
    }

}

但我只能把两张图片放到容器里。。。我的第三个不在,也没有类名。如果没有这段代码,我会得到每个图像的类名。您应该缓存对元素的引用,而不是在循环中查询DOM。 如果我理解正确,将每个图像包装到容器中的代码应该如下所示:


这是我在雅虎上得到的答案。由YaYox发布:

我意识到问题出在哪里。我不应该浏览图片。只需将其设置为零,因为循环开始时,代码一次附加一个图像。当第二个循环开始时,我没有更多的3个图像,但有两个,这就是为什么一个图像总是不显示,因为循环进行了三次


请打个电话,这会对我们有帮助的。我用不适合我的JavaScript更新我的小提琴。是的,我想把图像包装成div。一个图像到一个div
image_container.appendChild(child);
var container = document.getElementsByClassName("multimedia")[0];
 // if there is only one match, use an id instead ------------^ ?
var images = container.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
  var img = images[i];
  img.className = "imageClip";
  img.style.opacity = "0.8"; // Why not define this in imageClip class ..?
  imageContainer = document.createElement("div");
  imageContainer.className = "imageContainer";
  imageContainer.appendChild(img);
  container.appendChild(imageContainer);
}
function myFunction() {
    var multimedia = document.getElementsByClassName("Multimedia")[0]
    var imgs = multimedia.getElementsByTagName("IMG");
    for (var i = 0; i < imgs.length; i++) {

        imgs[0].className = "Image_clip";
        imgs[0].style.opacity = "0.3";

        multimedia.innerHTML += '<div class="Image_container_div">'+imgs[0].outerHTML+'</div>';
        imgs[0].remove()

    }

}