Question

我正在尝试编写一些JS，以便最终结果将其添加到HTML中。我打算用一系列图像来索引并用图像填充页面。有一个简单的方法吗？我是否需要将类切换为每个图像的ID？

<div class="box">
    <div class="boxInner">
        <img src="http://placehold.it/480x480"/>
    </div>
</div>

我已经想出如何用类添加div。

var newInner = document.createElement('div');
newInner.className = 'boxInner';
document.getElementById("wrap").appendChild(newInner);

我还想出了如何追加图像。我被困在试图把所有这些放在一起。

var newImage = document.createElement("img");
newImage.setAttribute("src", "http://placehold.it/480x480");
document.getElementById("wrap").appendChild(newImage);

Answer 1

这是一种做法。

var images = ["http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg", "http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg", "http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg", "http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg"];

for (var i = 0; i < images.length; i++) {
  var container = document.getElementById("container");
  var imgElement = document.createElement("img");
  imgElement.src = images[i];
  container.appendChild(imgElement);
}

<div id="container"></div>

Answer 2

假设你有一个包含img srcs的数组和一个id为＆＃39; box＆＃39;的数字：

var box = document.getElementById('box');
for (var i = 0; i < imgs.length; i++) {
    var newInner = document.createElement('div');
    newInner.className = 'boxInner';
    var newImage = document.createElement('img');
    newImage.setAttribute('src', imgs[i]);
    newInner.appendChild(newImage);
    box.appendChild(newInner);
}

使用JS添加带有图像内部类的div

2 个答案: