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对象，然后将.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. 计算图像源URL。
2. 创建容器div DOM对象。
3. 在容器对象上设置所需的超文本标记语言。
4. 将容器的.innerHTML属性设置为容器中所需的超文本标记语言字符串(这将自动在容器中创建该组DOM对象)。<代码>H225<代码>G226

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演示http://jsfiddle.net/576Tm/1