How to append a div and an image dynamically?

Question

I wanted to ask that is there a way by which I can append a div and an image inside it using javascript?

So basiclly, images are stored in an array. displayAllImages function() appends the images to the div #images but I want that function should append a div and within the new div there should be the image may be as a background or an image contained in a div. This should repeat for all images as in 3 images should be display as 3 divs containing 3 different images/elements of the array. Try to stick to array implementation only. Thanks!

Jsfiddle : http://jsfiddle.net/1qk3voxq/

    var gallery= new Array();

    gallery[0]="http://s6.tinypic.com/1zd1a47_th.jpg";
    gallery[1]="http://s6.tinypic.com/2ngh9ty_th.jpg";
    gallery[2]="http://s6.tinypic.com/29zy5qf_th.jpg";

    var x= $("#images");

    function displayAllImages() {
        var i = 0,
            len = gallery.length;        
        for (; i < gallery.length; i++) {
              
           x.append("<img class='roll' src='" + gallery[i] + "'>");
        } 
    };
     
    $(function() {
        displayAllImages();
    });

    #container {
     width:600px;
     height:600px;
     background-color:#000;
     }

    .roll {
        margin:4px;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
    <div id=images></div>
    </div>

http://stackoverflow.com/questions/867916/creating-a-div-element-in-jquery?rq=1 — kihu, Oct 29 '14 at 15:51
When creating the code snippet, did you happen to notice that there were separate sections for JavaScript, HTML and CSS? You should put all the code in one snippet. — , Oct 29 '14 at 15:52

score 0 · Accepted Answer · edited Oct 29 '14 at 17:30

0

You mean like this?

x.append("<div class='roll'><img  src='" + gallery[i] + "'></div>");

Updated Fiddle

edited Oct 29 '14 at 17:30

Yomesh

288
1
4
19

answered Oct 29 '14 at 15:55

APAD1

13,509
8
43
72

This seems to work but if I add a class to just created div and apply css to it (width and height) then that doesn't work. Moreover, why aren't they appearing in a row? – Yomesh Oct 29 '14 at 16:25
Because divs are block-level elements by default, if you want them to appear in a row, you need to set the inner div css to "display:inline-block;" [like this](http://jsfiddle.net/1qk3voxq/2/). I'm not sure what you mean about the classes. – APAD1 Oct 29 '14 at 16:27
http://jsfiddle.net/1qk3voxq/6/ check this. Why there is no effect of width and height? – Yomesh Oct 29 '14 at 16:29
1

actually it works! I'll figure out the rest! Thanks!! – Yomesh Oct 29 '14 at 16:33
No problem, let me know if you run into any other issues. – APAD1 Oct 29 '14 at 16:33
http://jsfiddle.net/1qk3voxq/7/ What if I need to align the image in the center of the div. Sorry, I am an amateur. – Yomesh Oct 29 '14 at 16:40
You want the entire image to be visible, or just to center what is visible? – APAD1 Oct 29 '14 at 16:44
You can make the entire image visible by setting `max-width:100%;` on the image, [like this](http://jsfiddle.net/1qk3voxq/8/). Not sure what you mean. I'm off to lunch but will be back later. – APAD1 Oct 29 '14 at 16:48
@Yomesh - Horizontal center align is `text-align:center;` in CSS – myfunkyside Oct 29 '14 at 17:09
@Yomesh - And if I may just give some other advice: `var i = 0;` followed by `for (; i < gallery.length; i++) {` really doesn't save that much resources or speed. I'd say just use `for (var i=0; i – myfunkyside Oct 29 '14 at 17:14
@Yomesh & APAD1 - But what isn't just me is this: `len = gallery.length;` followed by `for (; i < gallery.length; i++) {`... You are storing the array-length into a variable, but then you go and just reference the array directly in the for-loop. You never use the `len` var. – myfunkyside Oct 29 '14 at 17:19
@APAD1 - Actually I am using this as thumbnails for my slider/lightbox. So, when user hovers over any image then some event should trigger may be a caption should appear or some effect. See this : http://jsfiddle.net/yomesh/1qk3voxq/13/ Can you please suggest some effects and ways to implement them on hover. Thank you :) – Yomesh Oct 29 '14 at 17:22
@myfunkyside - yes I know. I'll delete the repeating/useless code once I am done with what I want to achieve. text-align:center to align images in the center of div wasn't working. Check out the latest fiddle I posted and tell me if my method of lightbox is decent or not and if you can suggest some ways to make thumbnails look better then it would be great! – Yomesh Oct 29 '14 at 17:26
@Yomesh - Oh also, this `$(function() {displayAllImages();});` is really not necessary. You can just call `displayAllImages();` directly, does not need to be wrapped in a function. – myfunkyside Oct 29 '14 at 17:28
@myfunkyside if in the fiddle http://jsfiddle.net/yomesh/1qk3voxq/15/ I delete the " len " then the pics just disappear. Any idea why? – Yomesh Oct 29 '14 at 17:45
@APAD1 if in the fiddle http://jsfiddle.net/yomesh/1qk3voxq/15/ I delete the " len " then the pics just disappear. Any idea why – Yomesh Oct 29 '14 at 17:46
@Yomesh - Because now (if you did what I think you did) the line above that looks like this: `var i = 0,`. You need to remove that comma and close it with a `;` – myfunkyside Oct 29 '14 at 17:49
@myfunkyside : Ya. I didn't notice that. Did you see the whole code? Thanks! – Yomesh Oct 29 '14 at 17:51
@Yomesh - I'm looking at your version 13 now. It's got quite a few errors. It's probably better to start a new question for your new problem. Here: **http://jsfiddle.net/1qk3voxq/18/**, I added some comments to your code to get you started. – myfunkyside Oct 29 '14 at 18:04

How to append a div and an image dynamically?

1 Answers1

Updated Fiddle