AppendChild Javascript

Question

我试图将图像附加到引导列但没有运气，有没有人知道我的代码有什么问题。

for (i = 0; i <= 11; i++) {
     var img = new Image();
     img.src = 'http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i] + "';
     var row = "<div class='row'><div class='col-md-2'> + img[0] +</div></div>";
     document.body.appendChild(row);
}

感谢任何帮助。 感谢

Answer 1

很抱歉，但您的代码没有任何意义。这有很多问题：

这是你的开始：

for (i = 0; i <= 11; i++) {
     var img = new Image();
     img.src = 'http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i] + "';
     var row = "<div class='row'><div class='col-md-2'> + img[0] +</div></div>";
     document.body.appendChild(row);
}

的问题：

1. 您创建了一个<img> DOM对象，但不对其执行任何操作。
2. 您需要将DOM对象传递给appendChild()不传递字符串。
3. 您无法通过将img[0]添加到字符串中来构造HTML字符串。它完全没有这种方式。您要么完全使用HTML字符串，要么使用构造的HTML对象，或者创建HTML对象，然后将.innerHTML设置为HTML字符串。你不能按照自己的方式混合两者。

---

我会猜测你想做什么：

for (i = 0; i <= 11; i++) {
     var src = "http://imagecache.arnoldclark.com/imageserver/" + obfuscatedString + "/" + camera[i];
     var row = document.createElement("div");
     row.className = 'row';
     row.innerHTML = "<div class='col-md-2'><img src='" + src + "'></div>";
     document.body.appendChild(row);
}

此代码采取以下步骤：

1. 计算图片src网址。
2. 创建容器div DOM对象。
3. 在容器对象上设置所需的className。
4. 将容器的.innerHTML属性设置为容器中所需HTML的HTML字符串（这将自动在容器中创建该组DOM对象）。
5. 将容器附加到您的文档。

Answer 2

这是一个全javascript解决方案

var camera = ['http://placehold.it/200x200']

for (i = 0; i <= 0; i++) {
    var img = new Image();
    img.src = camera[i];
    var row = document.createElement('div');
    row.className = 'row';
    var imgContainer = document.createElement('div');
    imgContainer.className = 'col-md-2';
    imgContainer.appendChild(img);
    row.appendChild(imgContainer);
    document.body.appendChild(row);
}

和jsfiddle demo http://jsfiddle.net/576Tm/1