0

I am trying to append images to a bootstrap column but having no luck, does anyone know what is wrong with my code.

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);
}

Any help is appreciated. Thanks

4
  • What is the error you are getting? It is a little worrying that you are referencing camera[i] without making sure it is valid, but you might have it hardcoded above. Commented Apr 1, 2014 at 22:53
  • I have it referenced above, if appendChild takes a node what method should i use in order to add in the html?# Commented Apr 1, 2014 at 22:55
  • looks like this question has a ways to go. I'm withdrawing my answer. Commented Apr 1, 2014 at 22:56
  • 2
    Please read the documentation. appendChild expects a DOM element, not a string. Commented Apr 1, 2014 at 23:07

2 Answers 2

3

Sorry, but your code doesn't really make any sense. There are lots of things wrong with it:

Here's what you started with:

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);
}

Issues:

  1. You create an <img> DOM object, but don't do anything with it.
  2. You need to pass a DOM object to appendChild() NOT pass a string.
  3. You can't construct a string of HTML by adding img[0] into the string. It simply doesn't work that way at all. You either work entirely in HTML strings or you work in constructed HTML objects or you create an HTML object and then set .innerHTML to a string of HTML. You can't just mix the two the way you are.

I'll take a guess at what you want to do:

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);
}

This code take the following steps:

  1. Calculate the image src URL.
  2. Create your container div DOM object.
  3. Set the desired className on the container object.
  4. Set the .innerHTML property of the container to the HTML string for the HTML that you want in the container (this will automatically create that set of DOM objects in the container).
  5. Append the container to your document.
Sign up to request clarification or add additional context in comments.

Comments

0

Here is an all-javascript solution

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);
}

and a jsfiddle demo http://jsfiddle.net/576Tm/1

5 Comments

You can't add an <img> DOM object to a string of HTML.
check it out again, i completed changed the answer
@jfriend00 I am too used to jQuery. It has made me soft!
OK, it looks fixed up now. I'm not sure why you use document.getElementsByTagName('body')[0] instead of document.body and I'm not sure why you can't just fill the container with HTML rather than create each element individually, but your code is a demonstration of creating each element individually.
Well document.body was null on plunkr where I was originally making the example. But then again document.getElementsByTagName('body')[0] was undefined there.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.